I get HTML code from server api and create links like this:
const blob = new Blob([page], { type: "text/html" });
const url = URL.createObjectURL(blob);
Then create a iframe to show this page:
const iframe = document.createElement("iframe");
iframe.src = url;
But I got a RefererNotAllowedMapError,
Your site URL to be authorized: blob:http://xxx.example.com/****
I already added *.example.com/*, blob:*.example.com/* in Website restrictions.
Based on the text in the error message, you need to add:
blob:http://xxx.example.com/*
(or blob:http://*.example.com/*) doesn't work per OP
Related
I'm using google tag manager in my website, I would like to send a http request to a 3rd party service incase someone visits a specific page.
the trigger is setup well, what i'm trying to figure is if the url for post is for example:
"https://hook.eu1.make.com/g88t9og168tfh4uejyh55j5hbao7nutw" how do I wrap it in custom code so it will fire everytime the page is loaded? any javascript examples ?
Thanks
This is possible. Add a custom html tag in Tag Manager which fires on the pages you want.
Add and change this code into the html tag:
<script>
var headers = new Headers();
headers.append("Content-Type", "application/json");
var body = {
"yourdata": yourdata,
"user_agent": navigator.userAgent,
"url": window.location.origin + window.location.pathname
};
var options = {
method: "POST",
headers: headers,
mode: "cors",
body: JSON.stringify(body)
};
fetch("https://hook.eu1.make.com/YOUR_WEBHOOK", options);
</script>
Context
I'm building a chrome extension that allows users to run automated scripts on 3rd party sites from anywhere on the web. The extension needs the ability to dynamically insert an iframe on any page that the user in on where that iframe is loading a 3rd party site.
The Problem
When I try to load linkedin.com in an iframe from google.com I get the linkedin.com refused to connect. If I look I can see that the x-frame options are still present in the headers while I have confirmed that I've stripped them out in them out.
I've added the following to my extension background script to allow iframes to load in any site
chrome.webRequest.onHeadersReceived.addListener(function (details) {
const headers = details.responseHeaders.filter(header => {
let headerName = header.name.toLowerCase();
return !(headerName === 'content-security-policy' || headerName === 'x-frame-options');
})
if (details.url.includes('linkedin.com')) {
// this console log shows that I've stripped out the necessary headers correctly
console.debug('REMOVED HEADERS: ', headers);
}
return {
responseHeaders: headers
};
}, {
urls: ['<all_urls>']
}, ['blocking', 'responseHeaders']);
I'm using the following code in the console on google.com to insert an iframe loading linkedin.com
(function () {
var iframe = document.createElement('iframe');
iframe.style.position = 'absolute';
iframe.style.zIndex = 100000;
iframe.style.top = 0;
iframe.style.left = 0;
iframe.height = 600;
iframe.width = 900;
iframe.referrerPolicy = 'no-referrer-when-downgrade';
iframe.src = 'https://www.linkedin.com';
document.body.appendChild(iframe);
})();
Here you can see the console log showing the modified headers with x-frame and CSP removed from the iframe request headers
but then the iframe doesn't load. it returns 200 but nothing happens
This actually was working and the Brave shield was preventing the iframe from loading in the page.
I would like to force a download of an image stored in Firebase Storage, but the download attribute in HTML anchors does not support cross-domain and I can't change the content-type to application/octet-stream because it's used to generate a thumbnail.
How can it be done ?
In this case, you cannot use a simple 'download' in html anchors.
What you can do is sending your download request through javascript.
There is an official sample for downloading.
storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
// `url` is the download URL for 'images/stars.jpg'
// This can be downloaded directly:
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
// Or inserted into an <img> element:
var img = document.getElementById('myimg');
img.src = url;
}).catch(function(error) {
// Handle any errors
});
about cross domain
download image example
more about web firebase
I had a similiar issue with downloading an mp4 video file. The browser seemed to ignore any download attribute in my html anchors. So my solution was to request the Blob from firebase like so wich also helps hiding an url to the file in storage:
await getBlob(storageRef(storage, path))
.then((blob) => {
downloadUrl.value = URL.createObjectURL(blob);
}
now the browser (including ios) directly triggers a download instead of opening the video in the browser by clicking the anchor:
<a :href="downloadUrl" download="videofile">Download</a>
With below code, I can not download image to iframe. Instead, it downloaded to local drive.
in JS:
storageRef.child('images/CopyPerson.jpg').getDownloadURL().then(function(url) {
var iframe1 = document.getElementById('downloadedCourse');
iframe1.src = url;
}).catch(function(error) {
// Handle any errors
});
in html:
<iframe id="downloadedCourse" width="800" height="500" src=""></iframe>
However, if I use img instead of iframe, it works as supposed. The reason I need use iframe is because I intend to download pdf file. Anyone knows why?
I presume that this is because the content-disposition header is set to attachment instead of inline. Try setting the metadata to change this and see if that works:
// Obviously you only have to set the metadata once per file
// Not every time you download the URL
storageRef.child('images/CopyPerson.jpg').updateMetadata({
"contentDisposition": "inline"
}).then(function() {
return storageRef.child('images/CopyPerson.jpg').getDownloadURL()
}).then(function(url) {
var iframe1 = document.getElementById('downloadedCourse');
iframe1.src = url;
});
Im in a page mainpage.aspx" in which i have this code:
<a rel="facebox" href="destination.htm?path=blabla">mainpage</a>
Im using facebox() to load the destination.htm
The problem is in my destination.htm,when im trying to hit an alert(window.location.href) im getting the mainpage.aspx and not the destination.htm.why ? all i want to do is to read the path from the page to get the querystring (but im getting the wrong path).
thanks alot
That is because facebox is not actually redirecting the browser to that page, but fetching via ajax and injecting it into the facebox div on the same page.
You could try grabbing the href attribute of the anchor instead, perhaps something like:
var lastVisited = null;
var lastVisitedQS = null;
$("a[rel='facebox']").facebox()
.click(function() {
lastVisited = this.href;
// you can extract the query string like this
var a = document.createElement('a');
a.href = lastVisited;
lastVisitedQS = a.search; // should give path=blabla
});
and then in your destination.htm do:
alert(lastVisited);
alert(lastVisitedQS);
Hope that helps!
You can use window.location.hostname to get host URL, window.location.pathname to get virtual dir+page and window.location.search to get querystring part of URL