I am helping migrate a legacy application. One of the requirements is we are able to handle requests for old images.
What we have is:
New site on new.com
Old site on old.com
Images to links (imported content) point to /imgs/cat.png however the actual image is hosted on old.com/assets/images/cat.png (for now).
<img src="/imgs/cat.png"/>
I setup a redirect for all png, jpg, jpeg, gif that 302's requests for new.com/imgs/(.*).(png|jpg|jpeg|gif) to http://old.com/assets/images/$1.$2
Everything works find in Chrome, Firefox and IE9 - however it was noted in IE8 the image does not render. Its possible that it has the same issue in IE7, 6 and 5.5 however I have not been able to test this.
Does anyone know why this is happening and how to fix?
I tried setting the contentType header on the response of the 302's to image/(png|jpg|jpeg|gif) and this did not have any impact.
Any insight would be appreciated.
Turns out the host that the images were served from was not a Trusted Site in IE, where as the host that served the page was. Normally youd see a popup asking if you wanted to accept an untrusted resource, however because this was a 302 redirect (original img URL was to the trusted, but 302'd to untrusted) IE never showed the popup.
Related
I am developing a react app that loads images from a public s3 bucket, this has been working consistently for months. Today I upgraded to google chrome 76 and instead of loading the images it just returns a blank.
The same effect was seen on a number of machines.
Interestingly the request for the image returns 200 but there's no image shown. If I visit the S3 url link manually the image is visible.
I was wondering if it could have anything to do with this forum post and new security measures introduced in the new version of chrome?
Here's a snippet of the content security policy we have for image requests
<meta
http-equiv="Content-Security-Policy"
content="img-src * 'self' blob: data:;"
/>
Is there anything I can do to get these images loading again?
I have got to the root of this and it seems like this was a CORB issue. Which must have been updated slightly in the new v76 release.
What was happening is that, when we were uploading the images to S3, we weren't explicitly setting the Content-Type header in the upload request. S3 then was incorrectly deriving the Content-Type as application/x-www-form-urlencoded. So when we tried to GET the images and load them into an img tag, Chrome saw this as invalid (understandably) and then blocked them.
Interestingly, the images have been loading in with the wrong content type fine up until now and I wasn't shown any CORB warnings until I started uploading new images.
Useful article on CORB for developers
Stack Overflow Article that helped:
How to change content type of Amazon S3 objects
Hope this helps!
I'm building a webapp that I want to use on a FireTV browser (Firefox) and when I do so, my Facebook images are appearing as broken links.
The images appear normally on all other devices/browsers I've tested (multiple on OSX, Android)
Initially I thought the the firetv browser wasn't liking hot-linked images for some reason as I'm loading them via the graph API, however I'm able to get images hotlinked from other sites to show up just fine on the fireTV as well.... It seems to be something specific about the facebook URLs it doesn't like? Does anyone have any ideas, or know of any tools to help debug it better?
This is what the img elements look like that I'm rendering, for example:
<img src="https://graph.facebook.com/v2.6/112816289586034/picture?type=large" />
Facebook Graph API returns a profile photo URL with a 302 redirect, which apparently is not Amazon FireTV friendly.
The solution was to include redirect=false as a url parameter on the API request, which causes FB to return a JSON object including regular image url that loads as expected.
I have a site with all secured content. Everything is loaded using https. I have verified this using fiddler2, the built-in debugger, and the DebugBar plugin. Nothing is loaded using http. Nonetheless, I am still getting the "Do you want to view only the webpage content that was delivered securely?" when I try to load the page in IE8. My users are complaining and I don't have a clue how to fix this. They are not computer administrators and cannot change the security policy for IE on their machines.
I figured out the problem and figured I'd post it here in case anyone else ever comes across this issue. The problem is that IE8 was treating the CSS background property with a relative URL as unsecure. So I had something like this:
.SomeRule
{
background: url('/SomeFolder/SomeImage.png') 95% 50% no-repeat;
}
and I had to change it to this to make the warning go away:
.SomeRule
{
background: url('https://www.SomeSite.com/SomeFolder/SomeImage.png') 95% 50% no-repeat;
}
I had a similar problem with a WordPress site where I recently added SSL. Obviously, something was being loaded with HTTP protocol, but what?
First, I checked the obvious:
I checked embedded page and post images for fully qualified paths using http protocol.
Then I checked links relative to the root as #datadamnation suggested in his solution.
Next I looked in my CSS to see if a background image URL used the http protocol.
I checked my plugins and my plugins CSS.
I checked the content in the sidebar widgets.
I checked the images loaded in the carousel slider.
Finally, I checked the theme's header image. When I looked at it using Firebug, I could see that it was still using http. To correct it, I had to remove the WordPress header image, and then add it back again and save. Refresh the page, and now the mixed content warning message is gone! It would have saved me a couple of hours of trial and error if I had done this first, so maybe you'll read this and save yourself some time.
Hi I have a question in regards to CS-cart version 2.2.4 Banners Slideshow.
It uses Nivo Slider and the banner works fine on the normal site (http://www.smilefile.com.au/) but as soon as it goes to the secure URL it breaks (https://www.smilefile.com.au/).
The image to the links don't seem to be broken but it seems the javascript isn't running...
obviously, you include some javascript files from external domain by http, it causes the secure problem:
[blocked] The page at https://www.smilefile.com.au/ ran insecure content from http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js.
Try to read this question, it should help.
How to Include CSS and JS files via HTTPS when needed?
I have a QR code image that's embedded from the Google Charts API. Recently it stopped working, but I haven't changed anything in my code.
Here's the page (note the broken images): [redacted]
As you can see, the images are embedded as http:// but when they are loaded, they're redirecting to the https:// URL on the google domain, which is broken.
Why is this redirect happening?
Edit: forgot to add -- what's even stranger is that if you view the image in a new tab, then change http to https (in effect, making the url the exact one that was originally requested),
it loads fine.
Edit #2 removed the link to my test site, as I've fixed the problem.
Turns out the google charts domain has changed. The new one is:
https://chart.googleapis.com
do not use
http://chart.apis.google.com