Can't embed iframe onto site - tried everything?

Hi everyone,

I've scoured the forums trying to find a solution to my problem.

Here's the sample page I'm working on: https://www.mydryeyedata.org/symptoms-list/how-it-started

I'm trying to embed an iframe element on my site (on a blog post, actually). I created a survey and want to have a blog post for summary data of each question, which is accessible by an embeddable link provided by the survey platform, which should go to this page: https://www.questionpro.com/t/ZRhJQhZGgEqYG.

<iframe src='https://www.questionpro.com/t/ZRhJQhZGgEqYF' width='100%' height='600' frameBorder='0'></iframe>

When I'm editing in Safari or in a private tab, I just see empty boxes. I tried chrome and once I allowed unsafe elements I got the grey frowny face saying "www.questionpro.com refused to connect". I've contacted them about why their embed isn't working, but I haven't ruled out that this is a Squarespace issue.

Things I've tried:

• I know the url is https
• Putting the above code into a code block doesn't work; frowny face.
• Putting the url in an embed block says it's not valid.
• Using specific code in the embed block and adding custom CSS also doesn't work; small box and frowny face. I tried the following per a few help articles (e.g. https://answers.squarespace.com/questions/69710/why-cant-i-interact-with-iframe-content.html)

Code in embed block (grey < / >):

 <div style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;">
 <iframe src="https://www.questionpro.com/t/ZRhJQhZGgEqYG"></iframe>
</div>

Custom CSS: (is height: 100% valid? I'm embedding like 100 iframes on my site, and some are a lot taller than 600px. I could also choose some random value)

my-iframe iframe {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border-style: none;
/*  to ensure proper scrolling and overflow handling on 
mobile devices, put this styling in a div wrapper around the iframe 
because it's unreliable in css:
  -webkit-overflow-scrolling: touch;
                    overflow: auto;
*/
}

Since chrome says www.questionpro.com refuses to connect, I've contacted them. I'm not sure if they'll be able to solve anything or if this is a square space issue. Btw when I put the embed code provided into something like https://html5-editor.net/ it also doesn't work, leading me to think that it's a QuestionPro problem.

@alxfyv @Jay Wilson Jr @raptra @alxfyv

Thanks in advance, I'll be sure to provide updates and let everyone know what worked.

I will follow up with the provider. I've read about the security implications and will have to decide based on what they say.

Thanks so much for a prompt reply!

@Paul2009

I don't follow, actually.

https://www.questionpro.com/t/ZRhJQhZGgEqYG

takes me to

https://www.questionpro.com/a/ShareDashboard?mode=individualQuestion&surveyID=6729391&dashboardID=1404280&sectionID=6

Both seem secure to me? Am I missing something?

I'm having the same issue. I contacted A2 hosting and added a forced HTTPS code so embedded URL will not revert to HTTP, but I'm still getting the refused to connect icon.

Squarespace embedded page:

http://www.tanner-designed.com/shay-residence

A2 embedded URL

https://www.tanner-storage.com/shaytour10/index.htm

On 7/2/2019 at 10:52 PM, paul2009 said:

This isn't a Squarespace issue. As is usually the case with iframes, the framed content is being blocked to protect your visitors from insecure content. As you've probably read, you cannot load insecure content when your own website is using security (HTTPS or SSL).

In this case you are trying to load content using a quicklink over HTTPS but this is converted by the remote website into an insecure link 'http://www.questionpro.com/a/ShareDashboard?mode=individualQuestion&surveyID=6729391&dashboardID=1404280&sectionID=6'. The request is therefore blocked.

Dear @paul2009 is there any work-around that you are aware of since last year? I appreciate your time!

23 minutes ago, ArminB said:

is there any work-around that you are aware of

I’m not sure I understand. A workaround to embed non-secured content on a secure page?

On 7/17/2020 at 10:25 AM, paul2009 said:

I’m not sure I understand. A workaround to embed non-secured content on a secure page?

If the site I wanted to embedd is also on HTTPS, that's why I was wondering. Thanks

2 hours ago, ArminB said:

If the site I wanted to embedd is also on HTTPS, that's why I was wondering.

You can usually embed SSL content in an iFrame. Do you have an example of a site where you're having difficulty doing this?

3 minutes ago, paul2009 said:

You can usually embed SSL content in an iFrame. Do you have an example of a site where you're having difficulty doing this?

 

Thanks for your help! that's the site I'm having troubles with:
https://www.clientaxcess.com/#/login

Documentation: https://support.cch.com/kb/Attachment.aspx?solutionId=000051145/How-do-I-embed-the-CCH-Client-Axcess-login-form-on-my-firm-s-Web-site&index=2&artype=WKArticleType__kav

What symptoms were you seeing? From the documentation, you should be able to add the login form directly to a Squarespace page without using an iFrame. Simply add the core HTML to a Code Block.

However, I don't have an account so I can't test if this works.

<form name="Form1"
action="https://www.clientaxcess.com/embeddedLogin.aspx"
id="Form1" target="_blank" method="post">
<div class="login">
<input type="email" name="txtbxUserID"
autocomplete="off" placeholder='Enter your user ID'
id="txtbxUserID" required>
<input type="password" name="txtbxPassword"
placeholder='Enter your password' id="txtbxPassword"
required>
<input type="submit" value="Log In">
<a href="https://www.clientaxcess.com/#/forgot"
target='_blank' class="forgot" style="width:240px;
margin-top: 10px;">Forgot password?</a>
</div>
</form>

On 7/21/2020 at 4:24 PM, paul2009 said:

What symptoms were you seeing? From the documentation, you should be able to add the login form directly to a Squarespace page without using an iFrame. Simply add the core HTML to a Code Block.

However, I don't have an account so I can't test if this works.

<form name="Form1"
action="https://www.clientaxcess.com/embeddedLogin.aspx"
id="Form1" target="_blank" method="post">
<div class="login">
<input type="email" name="txtbxUserID"
autocomplete="off" placeholder='Enter your user ID'
id="txtbxUserID" required>
<input type="password" name="txtbxPassword"
placeholder='Enter your password' id="txtbxPassword"
required>
<input type="submit" value="Log In">
<a href="https://www.clientaxcess.com/#/forgot"
target='_blank' class="forgot" style="width:240px;
margin-top: 10px;">Forgot password?</a>
</div>
</form>

 

Great idea! Thank you! you're right - easier to totally get rid of the iFrame

Same issues here.  Any general updates on this.  Network Solutions claims everything set fine, its https, its an HTML5 video, get the unhappy frowning Chrome icon.