Chrome Extension: Possible to Inject External JavaScript in Secured Pages? - javascript

I have been pulling my hair all day.
I am creating a tool for Facebook.
I am trying to inject Remote Javascript into my Chrome Extension.
It seems to be working on all other sites, except for on Facebook.com because the http protocol is secures: HTTPS
The Script is getting injected when I am browsing other sites that does not use HTTPS
Is it not possible to inject external javascript to provide dynamic content for secured sites?
I am using the following code to inject external js:
app.js (part of the extension)
loads the following:
chrome.tabs.executeScript(tabId, {file: "js/loadexternal.js"});
Then /js/loadexternal.js does the following:
var s = document.createElement('script');
s.type = 'text/javascript';
s.src ='https://www.website.com/loader.js?client=tacx';
document.getElementsByTagName('head')[0].appendChild(s);
Please note: I am also loading the remote script from a Secured (HTTPS) server.
Doesn't help!
This loads the loader.js file whenever I am not on a Secured page...
But it is not loading on Facebook which seems to be always on HTTPS protocol.
Please help me. Thank you.
PS> Is there a work around to display dynamically compiled results within my tool extension for FB?

If you look at the HTTP response headers on facebook's page, you'll see the following line:
content-security-policy: default-src *;script-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl 'unsafe-inline' 'unsafe-eval' https://*.akamaihd.net http://*.akamaihd.net *.atlassolutions.com;style-src * 'unsafe-inline';connect-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.spotilocal.com:* https://*.akamaihd.net ws://*.facebook.com:* http://*.akamaihd.net https://fb.scanandcleanlocal.com:* *.atlassolutions.com http://attachment.fbsbx.com https://attachment.fbsbx.com;
Facebook has a security policy disallowing scripts from domains that aren't part of this list, so I don't think you'll be able to load an external script from your extension.
If that header wasn't there, you would normaly be able to include scripts hosted on https:// protocol.

Related

i can't inject script to a site with content.js chrome extension

i am trying to inject script to a site with chrome extension manifest v3 to do someworks with site's window object,like disable alert or sniff xmlHttpRequests and listens to them and their response.
so when i'm using this code in Content.js :
Content.js :
const alertScript = document.createElement('script');
alertScript.innerHTML = `window.alert=function(){console.log('alert disabled!')};`
document.head.appendChild(alertScript);
But it didn't work and this error was in console :
Refused to execute inline script because it violates the following Content Security
Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword,
a hash ('sha256-UVElatCQi2odTlw3V21Lr91ia1hU68fiNgVYG5EZibk='),
a nonce is required to enable inline execution.
p.s : In manifest v2 , i don't have this problem and easily can inject scripts without any error.But in manifest v3 i have this problem.
Am i need a permission or do something ??
thanks for your help ..
MV3 imposes new restrictions that limit an extension's ability to execute unreviewed JavaScript through a combination of platform changes and policy limitations.
An 'unsafe-inline' token is ignored in manifest v3, so there is no way to execute inline scripts.
Don't use inline scripts, you can do exactly the same in a separate file.

Cordova InAppBrowser executeScript callback

I try to parse some site and execute script in Cordova InAppBrowser's method executeScript on iOS and return some result in callback function, but get this error:
Refused to load gap-iab://InAppBrowser1249228873/%5Bnull%5D because it does not appear in the frame-src directive of the Content Security Policy.
I understand, that gap-iab:// scheme should be included to Content Security Policy in <meta> tag, but code is executing not on my site and I don't have access to it.
Can anyone suggest a decision to resolve this problem?
P.S. On Android executeScript works perfectly.
You could use nginx to proxy the HTML page you are trying to load. You'd set up nginx to proxy the site you are loading in the InAppBrowser, and use the add-header to add a Content-Security-Policy in the response with "'default-src' gap: gap-iab:"
The one issue you may have is if the original server already includes a strict Content-Security-Policy, because the strictest content-security-policy will get applied.

Why can't load js file in my local apache2 server?

In my local domain's webpage , both
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js";
jq.src = http://127.0.0.1/js/jquery-3.3.1.min.js
can be loaded.
In the stackoverflow's webpage,right click to enter into chrome's inspect--console.
const jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js";
document.head.appendChild(jq);
jq.addEventListener('load', () => {
console.log("hello world");
console.log($ === jQuery);
});
The remote jquery.js file can be loaded,now to replace it with local js file--http://127.0.0.1/js/jquery-3.3.1.min.js .
Why can't load the js file in my local apache2?
Sites you are visiting can apply security policy for javascript - which includes the debugger. I think what you are seeing is the application of the content security policy associated with the web page you are visiting.
You can see this in the page headers. In Chrome (as explained here), you can view the html headers sent with the page:
Open the developer panel, select the "network" tab, and reload the page.
For stackoverflow, look under the "name" column for "stackoverflow.com" - there may be two if you originally loaded it via http, so find the one which is https - probably the second one. Click that one, and select the "headers" tab on the right. You will see in amongst the response headers:
content-security-policy: upgrade-insecure-requests
This is explained here.
Basically, it tells the browser that all http requests should be "upgraded" to https. So when you try to access http://127.0.0.1/..., your browser upgrades the request to https://127.0.0.1/..., which your local server probably isn't set up to handle.
This is not limited to Chrome - all modern browsers should do this.
I browsed, for example, a few sites with Safari, and, in some cases, got an error message, such as on GitHub:
Refused to load https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js because
it does not appear in the script-src directive of the Content Security Policy.
That is another variety of content security policies you can read about here.
try
jq.setAttribute('src',"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js");
jq.setAttribute('crossOrigin',"Anonymos")
jq.onload=onFinish;

Jquery load https url

I have this problem. In external web site I have a script like this:
<div id="idtest"></div>
<script src="//example.com/widget.js" type="text/javascript"></script>
example.com is in https (allow both http and https). In the server in the script widget.js I have:
$('#idtest').load("https://example.com/index.html")
I get this error: Mixed Content: The page at 'thepage' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com/index.html'. This request has been blocked; the content must be served over HTTPS.
I don't understand: why the error and why the endpoint is in "http"?
thanks
EDIT
More information:
if in the widget.js I do this:
$('#idtest').load("./index.html")
the content is load and all works perfectly if I load the script in my site.
If I do something like:
x = "https://example.com"
$('#idtest').load(x + "/index.html")
or
$('#idtest').load("https://example.com/index.html")
I get the error (if I put the script in my site or in external site). Why?
EDIT 2
more informations:
my site is in django
EDIT 3
In firefox I load the page in https and http. It doesn't work in Chrome. I see this situation in firefox net analyzer when call the url :
302 https://example.com/index.html
200 http://example.com/index.html [mixed content]
What understand this situation (https to http)? Could be a Django redirect problem?
A mixed content error happens when:
you try to load secure content SSL(https) on a page served insecurely (http) served
Or the opposite
you try to load insecure content (http) on a page served securely SSL(https) served
Your error message is warning that your calling page has been loaded in insecure mode
You haven't explicitly explained this, but your error indicated your page is being served without SSL. When you try to load a protected resource this becomes a mixed mode problem of protected resources and insecure.
If possible, you try to serve the reference file the same way
You can serve your main page in SSL (https)
You can request the partial page in http
$('#idtest').load("http://example.com/index.html")
or
Just as you have resolved it, request the partial page without protocol. Now your loaded file will be loaded using the protocol used by your page.
About your specific resource:
I tried loading:
http://example.com/index.html
and
https://example.com/index.html
The result was the same. I got a simple page with the message:
Example Domain
This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.
More information...
I think it is more a problem of cross origin domain.
the $.load function of jquery use ajax to load the url and so you cannot do cross domain call if the target URL does not implement CORS headers.
In your example, the server example.com must return a header
Access-Control-Allow-Origin: *
You can also replace * with the domain of the page that want to load the content by AJAX.
A good blog post on how to use CORS:
http://www.html5rocks.com/en/tutorials/cors/
I had this issue on Ruby on Rails webpage and the the mistake was to use "_url" helper instead of "_path" helper, on a https webpage:
in a view:
wrong: borrar_linea_factura_url(l)
ok: borrar_linea_factura_path(l)
As a recap of said before:
"_url" helper generates /controller/action/params
"_path" helper generates https://controller/action/params

Chrome won't load jquery or soundcloud api

I'm trying to build a chrome extension, but for some reason I can't seem to make API requests to SoundCloud or load Jquery.
I know it's because of this:
I will load jquery as such:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
And in my console, I will recieve
Failed to load resource: net::ERR_FAILED
chrome-extension://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
The same thing happens for the soundcloud api:
chrome-extension://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2
Why does chrome-extension// keep coming in front of the urls and how do I stop it?
According to Content Script Policy (CSP), script resource can only be loaded from the extension's package. This will make extensions more secure and ensure that extension will only execute the code you approved.
Solution 1: Download the specific version of jQuery file, include it to your package and then load it into document.
<script src="js/jquery.1.11.1.min.js"></script>
Solution 2: Actually you can relax the limitation by defining the whitelist of resource origins in manifest file. You could refer to this for more details if you have a need to load external js file for some reasons.
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2; object-src 'self'"
Note:
Whitelisting resource only allow to be loaded over the following protocol: HTTPS, chrome-extension, and chrome-extension-resource. Please use https to load the external library if you want to adopt whitelist solution.
Use whitespace to separate domains form each other if you want to define multiple domains in whitelist.
"content_security_policy": "script-src 'self' https://domain1.com https://domain2.com;"
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Categories