I am trying to load an SVG to use as a CSS filter as described in https://developer.mozilla.org/en-US/docs/Web/CSS/filter. I am hosting the SVG on my root domain of the application and I am using the said SVG inside an iframe that I create using the srcdoc attribute. The html that the iframe loads is stored as a string inside my main application. The reason I use the iframe is because I render arbitrary user input in that iframe and I have set the sandbox attribute ( no cross origin requests and no access to root application cookies ). I am receiving the following error:
Unsafe attempt to load URL http://localhost:3000/filter.svg from frame with URL about:srcdoc.
Domains, protocols and ports must match.
I attempted to use the URL.createObjectURL function and pass the svg directly but I still receive the following error:
Not allowed to load local resource: blob:null/692e5c8b-f87e-49cd-9efd-68ee65e98ea6.svg
I even attempted to load an html file hosted on the same domain as the iframe and I still receive the error that it's unable to load URL localhost/filter.svg from localhost. I guess that's correct since the sandbox does not give same-origin access.
My question is how can I achieve the filter effect without removing the same-origin sandboxing? I cannot understand why using url() property of css is considered a dangerous cross-origin request but loading an image with the <img> tag is allowed...
Similar issue with no answer:
XMLNS W3 URL for SVG spec now throwing error in Chrome
I managed to fix the issue by inlining the svg to the html of the iframe. Relative issue that in the end helped me with the fix: SVG filter not showing up in Firefox, working fine in Chrome
Related
im trying to load an image with p5.js loadImage(image);.
Im using the p5 library on my desktop.
Im not using the browser editor when im using the browser editor it handles the loading just fine
but im getting 2 errors the first one says
Fetch API cannot load
file:///C:/Users/3worl/OneDrive/Skrivebord/G_O_E/planet.jpg. URL scheme
must be "http" or "https" for CORS request.
the second one says
p5.js:65680 Uncaught (in promise) TypeError: Failed to fetch
Your error message is pretty explicit:
Fet API cannot load file:///C://..... URL scheme must be "http" or "https"
You are trying to access a file like you would do in the window file explorer with the path file:///C://... which doesn't work in javascript code.
If you look at the loadImage() doc you'll read:
The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.
So let's say that your sketch is located on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/sketch.js and your image on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/assets/planet.jpg you will need to use loadImage('assets/planet.jpg') i.e. using the path of the image relative to the sketch.
Note that if you could also use an URL if the image is hosted online, like loadImage('https://earthsky.org/upl/2018/01/planet-artist.jpg') but that require that you host your image online which will require a webserver or an hosting service.
I have seen lots of topics, but none of the solutions worked.
My app creates a PDF file with PHP and then retrieves the path into JS. After that I create an Iframe and tell the browser to print it.
The following code works only on chrome, but my POS Printer has a issue with chrome (documented) that creates alot of paper. So the solution is to use another browser...so my guess was to use Firefox.
$('#pdf-iframe').attr('src', json.pathToPdf).after(function()
{
setTimeout(function()
{
document.getElementById('pdf-iframe').contentWindow.focus();
document.getElementById('pdf-iframe').contentWindow.print();
}, 300);
});
In google chrome the PDF Preview is opened, in Firefox I receive the following error:
SecurityError: Permission denied to access property "print" on cross-origin object
What I have tried so far without success:
Use window.frames["pdf-iframe"].focus(); window.frames["pdf-iframe"].print();
Enable/disable pdfjs.disabled
Use imagick to convert to PNG (and it works - it allows to print) however the receipt PDF is broken in two pages (the receipt only has one page) AND it add's automatically headers and footers to the img (like the url; pages number; etc)
Installed "CORSE" extension in order to remove Cross-Origin
Set security.fileuri.strict_origin_policy as FALSE
Saved the PDF as base64_encode and then used <iframe src="data:application/pdf;base64,my_binary_data"
Added header("Access-Control-Allow-Origin: *");
Installed the latest Firefox version
Changed https://sitename to https://www.sitename
Changed the file path to match the path of the source code. The code is being executed in sitename.com/app/files and the file path is sitename.com/public/pdf-files/mypdf.pdf
Instead of retrieving the file path from PHP, read the file directly using header() and readfile() functions
Tried to use a button to open the iframe instead of auto-load/print
I'm working on a Chrome App, and I have a script file that's saved in the app's sandboxed filesystem. (It's available via a URL filesystem:chrome-extension_****/Persistent/script.js
I'm able to use Chrome's FileSystemAPI to read the file in the main app window. However, I need it to be accessible and executable in a sandboxed page.
I have the following in my manifest -
"sandbox": {
"pages": ["sandboxed_page.html"],
"content_security_policy": "sandbox allow-scripts;"
},
And I'm using the page like this:
<iframe id="sandbox_frame" seamless="seamless" src="sandboxed_page.html" sandbox="allow-scripts"></iframe>
I tried loading the file in the main app window, use window.URL.createObjectURL() to convert it to a blob: URL, and passed this URL via postMessage() to the sandbox. In the sandbox, I'm trying to load the URL into a <script> element. I get an error saying Not allowed to load local resource: blob:chrome-extension%3A//...
The other option (which is working) is load the contents of script.js in the main app, and send the entire string through postMessage(). Not sure this is a good idea, as script.js could get pretty big.
Am I doing something wrong, or is loading local scripts in sandboxes prohibited by Chrome's security policies?
I went through https://developer.chrome.com/apps/app_external, but there's no mention of sending the external resources to the sandbox.
Sandboxed pages execute in a unique origin i.e. one that is different from the App itself, and you can't access filesystem URLs across different origins. The same goes for object URLs created from those files.
You're basically stuck with the postMessage approach, though you may be able to make it more efficient by transfering it as an ArrayBuffer rather than copying the data as a string. See https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects).
A bit of an unusual setup:
I'm writing in an html page that in turn loads another html page, parses it, analyzes it, and displays information about it.
The parsing is fairly easy using jQuery. I just need to figure out how to load the external page - that is, when page A is displayed in the browser, it needs to load page B, analyze page B, and display information about page B.
Both pages are local (not served via a web server).
Both load and ajax from jQuery run into the cross-origin permission issue:
XMLHttpRequest cannot load file://localhost/Users/me/test.html. Origin null is not allowed by Access-Control-Allow-Origin.
I can load the page with a script tag, but then I don't know how to access it so I can parse it:
<script type="text/html" src="test.html"></script>
Any ideas?
Have you thought about using JavaScript/jQuery to create an iframe? (You can use CSS to make the iframe hidden to the end user.) Then you can listen for the iframe's onload event, and parse it through the iframe's contentDocument element (I believe).
In chrome My SSL related page got blank on other browser it works fine.
It gives the error message
"The page at https://xyz.com/test/checkout ran insecure content from http://xyz.com/test/checkout/css/styles.css"
In my website some pages are on SSL,I have only one masterpage which is used in both type of pages(http and https),I want to use my css and js which will work on both conditions.
Check any resources in the CSS file (like images and background images).
If they link to the HTTP domain see if you can rewrite them to be a relative path, so the HTTP/HTTPS switching is automatic.
It is safe (and permitted) to include CSS that is served over HTTPS in a web-page that is served over regular HTTP; so, one option is to use https://xyz.com/test/checkout/css/styles.css in all cases.
Another option, since the path seems to be the same for both versions, is to use //xyz.com/test/checkout/css/styles.css (not specifying the protocol); then the same protocol will be used for the CSS as is used for the HTML.
There are probably links in your CSS file that relate to a non-secure location.
I would suggest checking that file so you can make any updates.
Alternatively, on your server you could do a URL rewrite so anything that comes through on HTTP is re-written to HTTPS.
Using a protocol-independent absolute path is what you can leverage:
http://blog.httpwatch.com/2010/02/10/using-protocol-relative-urls-to-switch-between-http-and-https/