Lightning embed iframe from another website

I'm trying to build a simple component to display a web page inside a Lightning component. This is my starting code.

<aura:component implements="force:appHostable">
    <iframe width="100%" height="350px" style="border: 1px solid" src="https://trailhead.salesforce.com/en/content/learn/trails/wave_analytics_apps" />
</aura:component>

Then I was going to embed this into a Lightning Component using iframe. Is there any way to make it work? I've checked ClickJack by disabling it. I've created records in Remote Site Settings, CORS, and CSP Trusted Sites. I still get this error.

Solution

It's not you, it's them. The hint is in "{target} refused to connect". I don't know what you did to your Chrome error console but the error should be in there.

Refused to frame 'https://trailhead.salesforce.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

https://en.wikipedia.org/wiki/Content_Security_Policy

that trailhead page doesn't allow to be embedded anywhere else, not even on pages from same subdomain. Your component will work fine if you use src="https://example.com". Generally you'd need to talk with the target website's owner to whitelist your SF (internal mydomain and/or community, depends what exactly you want to do with it)