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
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.
I'm developing an application for LG WebOS using Angular2, in Chrome and Firefox works fine but in TV embedded browser not works. This problem reproducing only when I using HTTP module
enter image description here
any solution?, Thanks.
Edited:
LG WebOS not support cookies, my solution was disable cookies from HTTP module of Angular2.
According to the image that you provided the cookie in the browser cannot be read. The issue might be that cookies are disabled in the embedded browser, or you are trying to access a module like localStorage that might not be available in the embedded browser.
This would explain why the calls do not work in all browsers.
We've setup an angularjs application on cloudfront which has all asset files on s3 storage and from there used via cloudfront for SSL and performance.
We have an identical setup to what is described in this guide
https://rossfairbanks.com/2015/01/30/integrating-angular-s3-cloudfront.html
As we used same post to create our own setup, it seems though that this works on all browsers except Safari.
On Safari, when visiting a url directly on a given path or refreshing any sub pages, the ui-router would redirect user page to landing page.
For staging though, we have same setup but running directly on S3 without CloudFront in middle hence no SSL. but, yet it seems to work even on Safari
so, problem seem to be an issue with CloudFront and Safari to be more specific.
Can anyone advise on what could be the cause? and how we can solve it?
UPDATE: This issue might be related to this bug https://bugs.webkit.org/show_bug.cgi?id=24175
Angular on AWS (Cloudfront/S3) for Safari
I figured out that you need to use https in order Safari to refresh correctly. You can tell S3 to redirect to https protocol and the problem gets solved:
<Redirect>
<Protocol>https</Protocol>
<HostName>test.example.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
I had this problem a ton but not this specific issue. Safari which affects desktop and mobile/tablet devices does have this quirk. In many instances I was able to change it to a query parameter when I know it is going to be going through a redirect. It is a frustrating issue that has been going on for months.
Background:
I've built a Angular Application that works fine on browsers.
On the frontend side I have HTML/CSS/Angular/Bootstrap, backend side is Web API. So it is completely separated.
I took my front code zipped it, used Phonegap to build android app. When I run it I can see the first screen of my web site. I've confirmed that the angular code there works, cause I can see it filtered navigation based on the fact the user is not logged in.
But when I try to go to any other page of my app I get an empty screen, so I tried to remotely debug it using PG remote debugger. Every time I try to load anything but my homepage I loose connection to my target. I haven't seen any JS errors in console.
This is the only thing in the logs:
"exception firing pause event from native"
"exception firing resume event from native"
Is there some part of configuration that I missed that could cause this behavior, or is there another way I can debug this?
Since you are using angularJS, I'm guessing you are using a webserver locally to make the app run on your browser, so everything seem to work fine
Although PhoneGap uses a file server to run your app on WebView, which is similar to just opening the index.html on browser without webserver. Bottom line is if you can make your app work on desktop browser by just opening your index.html without webserver then it will work when u build as PhoneGap app.
You might run into Cross-Origin issues when testing your app on browser, this will happen if your app is making REST API calls or if you are loading angularJS templates from another .html file, these Cross-Origin restrictions are taken care in PhoneGap build. So when testing on local browser you might want to open Chrome with web security disabled.
If you have developed your app using a webserver to test, then you might have absolute URLs for loading assets or hrefs, you will have to change these to relative URL paths.
For example, change <a href="/#/next-page"> to <a href="#/next-page">, or <img src="/images/logo.png"> to <img src="images/logo.png">
I have an angularjs application hosted in my local IIS with route configured. For example '/services' will use servicesController and services.partial.html view.
It worked well if I clicked the link on the main page and the browser address changed to http://localhost/services. But if I refresh or type this URL directly I got 404 error.
Can anyone help me what I did wrong.
when you refresh or type you page, the entire page while be reloaded out of angular's control, in fact its the browser that is taking control. thus you localhost have to return a valid resource for /services. without html being returned, there is no way angular can control the behavior of the route.
basically what you should do is config you server and return the same page for /services as /
Use http://localhost/#/services instead of http://localhost/services and this would work fine as I see.