title: Angular iFrame and Reverse Proxy
body: <p>I have one dashboard application which runs on a specific port. </p>
  
  <p>Angular app runs on different port.</p>
  
  <p>As per some documentation, I have used the proxy. </p>
  
  <p>Here is what I have in proxy.conf.json file </p>
  
  <pre><code>{
    "/apik/*": {
      "target": "http://localhost:8123/dashboard",
      "secure": false
   }
  }
  </code></pre>
  
  <p>In the ts file, I'm setting up the URL as </p>
  
  <pre><code>url = 'apik/'
  </code></pre>
  
  <p>In the HTML file, I'm opening the dashboard using iFrame as follows </p>
  
  <pre><code>&lt;iframe [src]="url" style="width: 100%;height: 500;border: none;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>But I'm getting following error </p>
  
  <pre><code>ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)
  </code></pre>
  
  <p>I tried using the sanitizer in HTML as follows </p>
  
  <pre><code>&lt;iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(url)" style="width: 100%;height: 500;border: none;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>But this opens same page twice.</p>
  
  <p>I'm running the code using following </p>
  
  <pre><code>ng serve --proxy-config proxy.conf.json
  </code></pre>
  
  <p>Is this correct?</p>
  
  <p>Could you please help?</p>