Ace Editor uses this thing called 'blob' to create the Worker (which finds errors in code) and I want to use it in my Firefox extension. The console log showed errors like:
Content Security Policy: The page's settings blocked the loading of a
resource at blob:moz-extension://{extension-private-uuid}
I am able to fix this using
"content_security_policy": "script-src 'self' blob:; object-src 'self'",
but I read that Add-ons that use the blob: keyword will get rejected from AMO because of major security risks. Is that likely still the case considering that it's a library? If so, then is there any other way of getting the worker to work without blob and without editing any files?
Ok I found the solution.
There is an Ace Editor setting
ace.config.set('loadWorkerFromBlob', false);
which disables the loading of the worker file via blob. Yayyy!
Related
I'm following this tutorial to create a simple web app with a Microsoft 365 login. I'm currently getting this error when debugging locally (http://localhost:8080):
Warning:
mgt-loader.js:61 A parser-blocking, cross site (i.e. different eTLD+1) script, https://unpkg.com/#microsoft/mgt/dist/bundle/wc/webcomponents-loader.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
In Azure, I have the Redirect URIs set up to match (http://localhost:8080).
After some googling, I tried adding async, but then I get this warning and the login button doesn't appear:
mgt-loader.js:61 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
What would be causing this warning and how can I fix it?
First, check out how document.write works: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
You will understand why you cannot run document.write in asynchronous context (try running document.write('Hello world!'); in console on any page).
Warning tells you that a parser blocking (synchronous), cross site (not coming from the same domain as website) scripts can be blocked by Chrome in the future if someone has unstable or bad internet connection.
If you want it to run synchronously without that warning, you have to bundle that JS code with your own, or just serve it from your own origin, same as your website (e.g. localhost:8080). You can download #microsoft/mgt npm package and for bundling - use gulp, webpack or other tool of your choice.
https://unpkg.com/#microsoft/mgt#2.4.0/dist/bundle/wc/webcomponents-loader.js
This script tries to differentiate between async and sync contexts (line 175) and run document.appendChild (instead of write) for async context - but for some reason the check fails (readyState === loading).
https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
How to check if an Javascript script has been loaded Asynchronously (Async) or async attribute is present?
If you want to run this in non-blocking manner, you could try to fix the script by yourself.
There is a Github repo for that toolkit (https://www.npmjs.com/package/#microsoft/mgt), but there is no issue regarding async loading, nor regarding the warning that you have noticed - so maybe nobody else has noticed or thought about it yet.
I coded a static page using gatsby and deployed it. :80 is no problem, also when i hosted it on a github static page the console didnt spammed errors.
For each <GatsbyImage/> i am using in my project, i get this chrome-console-error on my static page.
[Report Only] Refused to connect to '<URL>' because it violates the following Content Security Policy directive:
"connect-src bitbucket.org *.bitbucket.org bb-inf.net *.bb-inf.net analytics.atlassian.com as.atlassian.com
api-private.stg.atlassian.com api-private.atlassian.com cofs.staging.public.atl-paas.net cofs.prod.public.atl-paas.net intake.opbeat.com api.media.atlassian.com api.segment.io
xid.statuspage.io xid.atlassian.com xid.sourcetreeapp.com bam.nr-data.net sentry.io bqlf8qjztdtr.statuspage.io <URL>".
Can someone point me to 1. understand the problem 2. handle it properly to avoid all this console errors. i hate errors in live projects ;-)
This is an issue on Content Security Policy usage on Gatsby. See more explanation on [1]. Gatsby cannot be used with a CSP rule directly.
For that there are some plugins, for example one at [2] that make it happen that CSP rule is partially generated by Gatsby. The errors get fixed.
Source:
[1] https://github.com/gatsbyjs/gatsby/issues/10890
[2] https://www.gatsbyjs.com/plugins/gatsby-plugin-csp/
When working with web applications, in the event of a failed scenario, I sometimes want to record the HTML in my browser's body, along with a few other bits and pieces gathered using javascript to help diagnose what went wrong.
I usually do this by executeScript and grabbing document.body.outerHTML. I then attach the diagnostics using:
await this.attach( JSON.stringify( diagnostics ), "text/plain" );
This works great, but has the unfortunate side effect of dumping the attachment out when running the scenario with default runners (like the progress runner: https://github.com/cucumber/cucumber-js/blob/master/docs/support_files/attachments.md#readme )
How can I attach diagnostics like this (which are primarily for use in continuous pipeline runs) without them swamping my terminal output?
Granted I have not tested this myself but according to the documentation if you provide a path with the output formatter(in your case progress) then the output will be to a file instead of stdout
https://github.com/cucumber/cucumber-js/blob/master/docs/cli.md#formats
See the above docs for more info ^
Without any built-in support (yet) for fine-grained control of attachment output, I'm working around this issue by attaching the output using a custom content type. Anything other than text/plain isn't automatically output.
I'm using rasterizeHTML.js to create a canvas representing DOM elements of the webpage (such as a screenshot of the page), and then I'm passing it to texImage2d, in order to use this canvas as a texture. Althought it works fine in Firefox 21.0, in others browser (Chrome, Safari..) I get the following error:
SECURITY_ERR: DOM Exception 18: An attempt was made to break through
the security policy of the user agent.
Is there a way to bypass the security policy? I want to use it locally. I tried also to use a local webserver (MAMP) because I thought it could by due to the same origin policy but the error is the same... Thanks a lot!
The local web server is needed, but have you also made sure that all of the images you are loading are from that server, not from other origins? Use the browser's web inspector to make sure you are not loading any resources from other domains.
I am trying to create a chrome extension that calls my rails app's api. currently the api returns json and it works fine, however when I try to build it into a chrome extension, it says :
Refused to load script from 'http://mysite.com/demo?q=hello?callback=jQuery16409466155741829425_1342489669670&_=1342489677171' because of Content-Security-Policy.
I looked up the document http://code.google.com/chrome/extensions/contentSecurityPolicy.html and it sounds like I can't do this unless I implement my site into a https version. (under "Relaxing the default policy" section) I am not sure if I understood correctly and it feels ridiculous to make such a big change just because of this. Am I misunderstood? Or is there a workaround to this? Thank you.
In a Chrome extension, cross-site XMLHttpRequests are allowed, provided that you define the source in the manifest file - see http://code.google.com/chrome/extensions/xhr.html.
A JSONP implementation loads an external script using the <script> tag, and inserts it in the document. Unless the source is whitelisted through the "content_security_policy" entry, JSONP cannot be used when manifest version 2 is active (do not use manifest v1 to overcome this, because it's deprecated, and a suitable alternative already exist).
When you're unable to receive a JSON response instead of JSONP, use an ordinary request to fetch the data, cut off the callback, then parse it. Eg:
// response is the response from the server
// Received through `XMLHttpRequest`, jQuery.ajax, or whatever you used
// cuts of jQuery....( and the trailing )
response = response.replace(/^[^(]*\(/, '').replace(/\);?$/, '');
By default browsers do not allow this because of the same origin policy.
However you can get around this by making a jsonp request.
As you using jquery this super easy with getJSON method