How to Embed a URL

When setting up a new page, you have the option to embed a URL instead of building the page from scratch.

Embedding Websites

If you own the website or have a direct relationship with the website's owner,  you can likely make the site embeddable. Keep in mind, these principles can apply to any website, and the Hackworks Innovation Challenge Platform’s ability to embed a website depends on the configuration of the website you are trying to embed.

Reasons a website won't embed

The website isn't secured (https)

If a website URL doesn't have "https" at the beginning, it may not be secured. However, some sites only show "http" and may still be secured – in browsers such as Safari or Chrome, look for the lock icon in the URL bar to indicate that a website is secured.

If the website is secured, the problem is likely the x-frame-options response or CSP headers. See below for more details on this. 

 

The website has the x-frame-options response header

Even if a website is secured, some websites are specifically configured not to allow embedding as a security measure. You can use this website to check if the x-frame-options response header is present on the website.

Paste the URL for the website you want to embed and click Test Header. If the result is "Couldn't find the X-Frame-Options header...", then this isn't the reason the website isn't embedding.

image1

The website uses a CSP policy that prevents embedding

The Content-Security-Policy directive shares some similarities with the X-Frame-Options header and may be used to fulfill some of the same functions. You can use this website to check if there are CSP headers on the website.

Paste the URL for the website you want to embed and click CHECK CSP. If the result is "No CSP headers found", then this isn't the reason the website isn't embedding.

image2

Can I make the website embeddable?

If you don't have a relationship with the website owner:

If you don't own the website and you don't have a direct relationship with the owner, then you're unlikely to get them to update what's needed to make the website embeddable. Most large websites won't change their policies around embedding but you can reach out to their support team to find out if there's some alternative. Odds are, you'll have to open the website externally.

 

If it's your website, or you know the website owner:

If you're trying to embed a sponsor's website, there's a good chance you can work something out with them. Ask your sponsor to check their SSL certificate, x-frame-options header, and CSP headers. If it's your website, have the admin for your website check on these things.

This article and the following links may be helpful to send to a website admin:

Keep in mind, the x-frame-options header's purpose is to protect a website from certain types of attacks, so website admins may not agree to remove it entirely. If the website uses CSP, there's a good chance the Hackworks Innovation Challenge Platform can be allow-listed using the frame-src directive linked above.