3

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

SorryEh
  • 900
  • 2
  • 15
  • 47
  • 2
    It's impossible. The website you are trying to embed does not allow it. Open your browser console to see the error ( `F12`) => `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".` – blex Apr 12 '18 at 20:06
  • Hi @blex thanks for your reply! I checked the console and the only error i see is for JSON.parse and Janrain_Config---the janrain has always had issues, is the JSON.parse talking about my code? is that why it says anonymous? – SorryEh Apr 12 '18 at 20:08
  • ohhh wow that's weird I didn't see that message. Thanks Blex! Can you post that as an answer and I'll check this off. I know of a work around to just link people to the tool instead – SorryEh Apr 12 '18 at 20:08
  • Possible duplicate of [Url is not loading in iFrame Blank Screen](https://stackoverflow.com/questions/42050426/url-is-not-loading-in-iframe-blank-screen) – Ivar Apr 12 '18 at 20:18

2 Answers2

8

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.

blex
  • 24,941
  • 5
  • 39
  • 72
  • 1
    Thanks blex! this saved me so much time. Not sure why my console wasn't showing that error on Chrome but I've got a workaround for the issue. Thanks again :) – SorryEh Apr 12 '18 at 20:24
  • @SorryEh can you share the workaround? I am stuck at this point and need to make it work again. – Jigar Trivedi Mar 27 '23 at 12:10
  • @JigarTrivedi I was specifically using Luminate Online CRM/CMS for this issue so it may not apply to you. This was a while back but if I remember right I used a pagewrapper to load the tool and then insert that page wrapper in my specific page(s) where I needed the tool to be available. – SorryEh Mar 28 '23 at 14:46
-4

i think the the website don't allow JS so there is no answer for this question

Zakaria
  • 65
  • 1
  • 3
  • 13