Frame cannot Load - Content Security Policy Issue

Problem:
You are using iframe to load a site from within a website, and the frame does not load.
In my case, I am using https for both the website and the iframe.

Error:
If you press F12 on the browser, you will see error similar to:

Refused to frame 'https://iframe_site' because it violates the following Content Security Policy directive: default-src 'self' 'unsafe-inline' 'unsafe-eval'...... (this can be found in web.config). Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Solution:
Add the iframe_site to content-security-policy on the web.config.

<httpProtocol>
 <customHeaders>
  <add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' iframe_site;" />
 </customHeaders>
</httpProtocol>

PS: If you are using port for the iframe site, you would need to include the port when adding into web.config.