I am integrating react-google-maps in nextjs. Every thing works fine but when map is opened the images are not loaded:
I get Refused to load image because it violates the following content security policy directive : "img-src *"
What does this mean and how to resolve this? Is this related to my domain or my app server?
Note, Locally every thing works fine
You need to set you Content Security Policy Header to accept from the locations
Header set Content-Security-Policy "default-src 'self' https://www.googletagmanager.com *.images.google.com
something like that (not sure what ones you will need to add)
Related
I'm trying to build a simple component to display a web page inside a Lightning component. This is my starting code.
<aura:component implements="force:appHostable">
<iframe width="100%" height="350px" style="border: 1px solid" src="https://trailhead.salesforce.com/en/content/learn/trails/wave_analytics_apps" />
</aura:component>
Then I was going to embed this into a Lightning Component using iframe. Is there any way to make it work? I've checked ClickJack by disabling it. I've created records in Remote Site Settings, CORS, and CSP Trusted Sites. I still get this error.
It's not you, it's them. The hint is in "{target} refused to connect". I don't know what you did to your Chrome error console but the error should be in there.
Refused to frame 'https://trailhead.salesforce.com/' because an
ancestor violates the following Content Security Policy directive:
"frame-ancestors 'none'".
https://en.wikipedia.org/wiki/Content_Security_Policy
that trailhead page doesn't allow to be embedded anywhere else, not even on pages from same subdomain. Your component will work fine if you use src="https://example.com". Generally you'd need to talk with the target website's owner to whitelist your SF (internal mydomain and/or community, depends what exactly you want to do with it)
my friend. i have the same problem recently. So, I resolved temporary disabled the flags of chrome that implements the news features, the flags will be default only 84 version of chrome, but you can win this question quickly, do this:
1 - go to chrome://flags/ into url of chrome.
2 - disabled the flags below:
- SameSite by default cookies = disabled
- Enable removing SameSite=None cookies = disabled
- Cookies without SameSite must be secure = disabled
3 - click on Relaunch.
For you resolved definitly in saleforce, you can ask to the own (page embeded), that implement in your cookie same values in cookie them:
- On the cookie set values to:
- secure = Yes
- SameSite = NONE.
For me resolved good.
But if you need get a event by iframe using component Aura, tell me here and i give and post more information.
MDN docs state:
To enable a web page to contain an <img> element whose src attribute points to this image,
you could specify "web_accessible_resources" like this:
"web_accessible_resources": ["images/my-image.png"]
The file will then be available using a URL like:
moz-extension://<extension-UUID>/images/my-image.png"
<extension-UUID> is not your extension's ID.
It is randomly generated for every browser instance.
This prevents websites from fingerprinting a browser by examining
the extensions it has installed.
So, I would think that these resources cannot be read by any web page outside the extension, since they would need to know the random UUID.
However, the same MDN docs also state:
Note that if you make a page web-accessible, then any website may then link or redirect
to that page. The page should then treat any input (POST data, for examples)
as if it came from an untrusted source, just as a normal web page should.
I don't understand how "any website may then link or redirect to that page". Wouldn't it need to know the random UUID? How else could a webpage access this resource?
The point of Web Accessible Resources is to be able to include them in a web context.
While you can communicate the random UUID to the webpage so that it can use the file, it doesn't have to be included by the website code itself. Here's a hypothetical scenario:
You're writing an extension that adds a button to evil.com site's UI. That button is supposed to have an image on it.
You bundle the image with your extension, but to add it as src or CSS property to the webpage you need to be able to reference it from a web context.
So, you make it web-accessible, and then inject your UI element with a content script.
Perfectly plausible scenario.
Note that a random third-party site villains-united.com can't just scrape the URL to know if your extension is installed, since the URL is per-browser unique. This is the intent behind WebExtensions's UUID over Chrome's extension-id model.
However, let's continue our hypothetical scenario, from a security perspective.
The operators of evil.com are unhappy with your extra UI. They add a script to their code that looks for added buttons.
That script can see the DOM properties of the button, including the address of the image. Now evil.com's code can see your UUID.
Being the good guy, your extension's source code is available somewhere, including the page that launches nuclear missiles if called (why you would have that and why it would be web-accessible is another matter, perhaps to provide the functionality to good-guys-last-resort.org).
evil.com's script now can reconstruct the URL of this trigger page and XHR it, plunging the planet into nuclear apocalypse. Oops. You probably should've checked the origin of that request.
Basically, if a web-accessible resource is used in a page, the UUID likely leaks to that page's context via DOM. That may not be a page you control.
In my reactapp created by create-react-app I suddenly have an error in chrome when I try to run my app:
Failed to find a valid digest in the 'integrity' attribute for resource 'http://localhost:3000/static/js/0.chunk.js' with computed
SHA-256 integrity 'hW0einVybma+FCDLYbayWASTmGI9JBE1dkrmPvDzJXQ='. The
resource has been blocked.
However in IE it works fine. All I did was changing a label on a Button component. How can I avoid this error on chrome?
It sounds like the feature is simply doing what it's intended to do.
Do you have compression enabled in your Chrome for Android browser?
Google may be minifiying your CSS before sending it to your phone causing the signature to be invalid.
SSL prevents this from happening. Maybe we should look for https in PUBLIC_URL and toggle this feature based on that.
https://developer.chrome.com/multidevice/data-compression
whenever I visit my angularjs based website that loads images (http images on a https server) I get warnings in the console saying that mixed content has been blocked. And those images do not show up
It is not my browser because it happens on other browsers too and on other systems, it is not the server, because another website that does not use angularjs works fine. So I think it is related to angularjs.
I already did this:
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://images.RESOURCE.net/*'
]);
but it does not do anything. Moreover I tried loading them over a protocol-less url so //images.RESOURCE.net
This causes them to be loaded over https but then the server identify of the image server could not be validated and it also does not work.
Is there anyone who can determine the actual problem, is it angularjs and can angularjs fix it? It is almost impossible to remove angularjs from the project at the current state.
Thanks
-xCoder
This is not a limitation of Angular. Modern browsers block the loading of mixed (http) content over a secure (https) connection. This can be addressed by adjusting settings in your browser of choice.
Enabling Mixed Content by Browser:
IE: http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Internet+Explorer
Firefox: http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Mozilla+Firefox
Chrome: http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Google+Chrome
I have been attempting to port an existing Chrome extension to Firefox.
The extension uses a content script to add an element to a page and proceeds to bootstrap the angular app from that element.
This part works as expected, but individual directives that use templateUrl are blocked. Stepping through the code provides error messages like Access to restricted URI denied and NS_ERROR_DOM_BAD_URI.
In Chrome this problem is solved with the 'web_accessible_resources' whitelist.
This previous question seems to indicate that there is no analogous way to access extension resources in Firefox. This would be rather unfortunate, because, although I can inline all of the relevant templates, the extension also includes a number of images which are programmatically inserted on the page.
Is there any way to get at extension resources in an SDK extension?
If not, is it reasonably easy to do so with a legacy extension (as implied here)?
You can use the self module in the SDK to get a resolvable resource URI for files in the data directory. If you have your angular file in ./data/, you can retrieve it via:
const self = require('sdk/self');
console.log(self.data.url('angular.js'));
// Prints the url of `./data/angular.js`