I am writing a mini addon for chrome. In the addon, I have inserted a code to play audio where ajax is success. It doesn't work with websites that use https, but works fine on websites that use http. Can you help me edit it.
manifest.json
mystyle.js
For full resolution of the images:
http://i.stack.imgur.com/x8F5Q.png
http://i.stack.imgur.com/7bX5I.png
At a first glance, there are two issues with your code:
You shouldn't put chrome.tabs.getSelected and chrome.browserAction in mystyle.js. mystyle.js is a content script, which can only access limited chrome api.
However, content scripts have some limitations. They cannot:
Use chrome.* APIs, with the exception of:
extension ( getURL , inIncognitoContext , lastError , onRequest ,
sendRequest )
i18n
runtime ( connect , getManifest , getURL , id , onConnect , onMessage , sendMessage )
storage
Use variables or functions defined by their extension's pages
Use variables or functions defined by web pages or by other content scripts
You can't send http request from a https web page, since it's restricted by SOP and it's a browser behavior. To solve this, you should move your http request logic to background page and add the server url to permissions, see my following answer for more info.
Chrome extension - Disable Blocking of Mixed Content
Related
I have a basic FastAPI website with an endpoint to download an Excel template. The url's scheme is HTTPS. Until recently, this worked fine on Chrome and Safari. As people upgraded, Chrome has been blocking the download. This seems to be consistent with Google's insecure content policy implemented for 'mixed content downloads' described here:
https://blog.chromium.org/2020/02/protecting-users-from-insecure.html
My endpoint is pretty straightforward:
#router.get('/download_data_template')
def download_data_template(request: Request):
'''Returns data template from library
'''
# ### auth
# page access is authorized here
# end auth
file_name = 'TEMPLATE schedule_input.xlsx'
return FileResponse(
path=db.get_library_path(file_name),
filename=file_name,
media_type='application/octet-stream',
)
The endpoint is called from a Jinja2 templated html page with this:
<a class="btn btn-primary" href="{{ url_for('upload_schedule')}}" data-toggle="tooltip" data-delay='{"show":750, "hide":250}' data-placement="top" data-toggle="tooltip" data-delay='{"show":750, "hide":250}' data-placement="top" title="click to select and upload file. The file must be in property format.">upload schedule input workbook</a>
On Chrome, the developer panel shows the following error:
"Mixed Content: The site at 'https://<my_url>.com/' was loaded over a secure connection, but the file at 'https://<my_url>.com/download_data_template' was redirected through an insecure connection. This file should be served over HTTPS. This download has been blocked. See https://blog.chromium.org/2020/02/protecting-users-from-insecure.html for more details."
The file is nothing unique, it is a basic Excel .xlsx file, a template for people to fill out.
This continues to work fine in Safari and Edge but is blocked by Chrome.
The article in the chromium blog is informative but I do not see how I can make my download secure. I have searched with no success as well.
Any thoughts on how I can make a basic file download, specifically an .xlsx file, from disc using FastAPI that will conform with Google's new policy?
Thank you for any help on this.
Option 1
You could use HTTPSRedirectMiddleware to enforce all incoming requests to http being redirected to the secure scheme instead.
from fastapi.middleware.httpsredirect import HTTPSRedirectMiddleware
app = FastAPI()
app.add_middleware(HTTPSRedirectMiddleware)
Option 2
In addition to the above, you could use relative URLs instead of using url_for() in your Jinja2 template; for instance:
Link text
In this way, the scheme of the URL will remain https.
Option 3
You could have your own url_for custom function to replace the scheme of the URL, similar to the approach demonstrated in Option 2 of this answer.
You may also want to try passing --proxy-headers parameter to Uvicorn, as described here.
I am developing React App over FastAPI backend and had similar issue. I am not sure what {{ url_for('upload_schedule')}} evaluates for in your rendering engine, however in my case the problem was in inaccurate URL and its handling by FastAPI.
Referring to your example, I placed in my UI code /download_data_template/, so FastAPI engine sent 307, because it redirected to /download_data_template. Replacing /download_data_template/ with /download_data_template in UI code solved that for me.
This is probably rather problem of Chrome than FastAPI, but this is a simple workaround that fixes that instantly.
Up until several weeks ago I was able to stream icecast and shoutcast on my HTTPS site. This would create a "mixed content" warning but was never explicitly blocked.
Now I find that chrome is forcing the http://streaminglink urls to load https://streaminglink and I can't access the http audio anymore.
Here is a code example in jPlayer
$("#jquery_jplayer").jPlayer("setMedia", {
mp3:"http://149.202.79.68:8213/stream.mp3"
});
I expect chrome to load the http url but instead it is looking for the https and I get the following error in the console:
GET https://149.202.79.68:8213/stream.mp3 net::ERR_CONNECTION_CLOSED
NOTE
The https ^ - that's not coming from my code or configuration... =/
So it looks like this is default behavior for Chrome since 79.
https://www.engadget.com/2019/10/04/chrome-security-block-http-content/
Broke my site. Thanks Google.
you can now allow insecure content in the specific site settings
chrome://settings/content/siteDetails?site=https%3A%2F%2F<SITE_DOMAIN>
I'm building a Chrome extension that will let you add a bunch of new reactions to Facebook posts. You can see the first version of it here: http://reactions.us/
The way I'm handling it now is a bit inelegant. When a user adds a "reaction", I'm adding a custom emoticon as a comment and then parsing it, removing the original comment from the dom, and adding the corresponding "reaction" to the post.
Here's what I would like to do
I would like to reach out to an external api, say at http://api.reactions.us, in order to set and get the reactions for a certain story. In order to do this I (think) I need to add an ajax call to the page. But when I add the ajax call to a "web_accessible_resources" script that's loaded onto the page via an init script in "content_scripts" I get this error:
Refused to connect to 'http://reactions.us/getReactions?id=111' because it violates the following Content Security Policy directive: "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".
Here's the relevant code in the plugin: https://github.com/ollerac/New-Facebook-Reactions/blob/master/reactions.js#L161
Any help would be greatly appreciated. Perhaps there's a way to pass messages between the content scripts and the web accessible resources?
I found the answer. I had followed the advice of this post when I first started: Insert code into the page context using a content script
It suggests injecting your scripts directly into the page if you don't need access to any of the chrome API functions and that's exactly what I did because I didn't need them before.
But you can do pretty much the same thing (access and modify the dom -- and now even make ajax requests) merely with content scripts.
This post is helpful when talking about Cross-domain XMLHttpRequest using content scripts: Cross-domain XMLHttpRequest using background pages
I am experimenting with azure mobile services and have implemented the authentication example here. This works on most devices ( iOs, IE9 and chrome on desktop, IE10 Surface RT, android ) but on a WP8 device ( a Nokia 920, to be precise ) it returns
"Cannot reach window opener. It may be on a different Internet Explorer zone"
after attempting to return from the authenication providers pop-up. This is mentioned briefly in the link above, but only wrt to connecting to the service from localhost. This is not the case here and other devices work fine. It does not seem to be a problem with any particular authentication provider - all ( facebook, google, twitter, windows connect ) return the same message. And as these other devices work, it seems unlikely that the service is mis-configured, but there could very well be something subtle that I'm missing.
The way I got the authentication to work is not to use Facebook JavaScript SDK, but another flow, described here https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2
For handling the response when I get the redirect back from Facebook, I used the following code:
function handleLoginResponse() {
var frag = $.deparam.fragment();
if (frag.hasOwnProperty("access_token")) {
client.login("facebook", { access_token: frag.access_token }).then(
function () {
// do your thing when logged in
}, function (error) {
alert(error);
});
}
}
This code makes use of jQuery BBQ plugin, found here http://benalman.com/projects/jquery-bbq-plugin/.
This way I can get Facebook auth to work on WP8 and I'm able to pass the access token to Mobile Services login.
A slight problem is that now the access token sticks in my site URL, which I think is a problem if the user decides to share the URL, for example. I think I can get around this by e.g. putting the info in a cookie (or local storage) and then redirecting to the plain URL of my site.
I've got a canvas element on my website which, for some users, is throwing cross domain exceptions. The issue has occurred in Chrome, Firefox and Safari, but I've been unable to replicate it myself in any browser.
The console output from Chrome is:
Unable to get image data from canvas because the canvas has been tainted by cross-origin
data.
The error is thrown by the library StackBlur.js, where it calls imageData = context.getImageData( top_x, top_y, width, height );
However, the images used on the site are all on the same domain, protocol and port. The paths are generated by Rails. The main path is like https://myappp.com/ and the image paths are like https://myapp.com/assets/promo/slideshow/slides/myslideimage.jpg
Deploying the exact same code on our staging site (which does not use HTTPS) http://staging.myapp.com/ with image paths like http://myapp.com/assets/promo/slideshow/slides/myslideimage.jpg results in no errors.
Why might the use of HTTPS be causing cross-domain issues?
Thank you.
I was mostly mistaken. It turns out that our redirect from http to https was on the blink, so a user was able to visit the http version with assets from https, meaning that the error was entirely legitimate all along. I never reproduced it because I visited the site from my browser history, which was https.
Fixing our redirect so both the main request and assets are on the same protocol resolves the issue.