I have this image resize tool that I got from Bulk Resize Photos. I need to add it to my CMS feature called a Participant Centre.
For some reason the code itself won't work in the participant centre (it shows up blank), but it works in HTML pages outside of the Participant centre. So I thought maybe an iframe would work.
Now the frame of the iframe shows, but the content does not.
HTML:
<div id="BulkResizePhotosEmbed"></div>
<script type="text/javascript" src="https://bulkresizephotos.com/js/integration.js">
</script>
<script>
bulkresizephotos.load({ "resize_type": "exact", "resize_value": "300", "secondary_resize_value": "400", "quality_level": "0.5", "extension": "jpg", "preserve_aspect_ratio": true, "transparent_background": true, "background_color": "ffffff" });
</script>
I have the above code in a separate html doc that is hosted on the same server as the Participant Centre.
HTML:
<iframe src="http://www.supportcbcf.com/site/PageNavigator/reus_image_resize.html"></iframe>
I've also tried making the above link a secured link (https) but it still won't load. I tried it in a js fiddle and it didn't work there either. Now I don't think the Participant Centre is blocking any javascript codes because it has a thermometer and fundraising dollars that updates dynamically. I looked at the Console log and I'm not getting any errors.
Any help would be immensely appreciated!
Thanks
In order to make their website more secure, and to avoid being displayed inside another website (which could deteriorate the user experience, or even make the user think that the content is from another site), some of them have a Content Security Policy, defining the allowed frame-ancestors.
This allows them to notify the browser that they only want to be embedded in certain sites.
If you open your browser console, you'll see this error:
Refused to display 'https://...' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.facebook.com *.salesforce.com *.convio.net *.google.com *.force.com facebook.com salesforce.com convio.net google.com force.com".
If your website's domain name does not match the rule, your browser will block that page.
Here's an example of why this feature is good:
Imagine evilwebsite.com wants more Facebook likes. They could just embed an iframe of their Facebook page on their site, make it opacity: 0, and place it in front of their content, with a button positioned right behind the invisible "Like" button. People who click on it would actually click on the "Like" button. Free likes! That's why you cannot embed a regular Facebook page on your site.