title: How to display a web page by CefSharp.Wpf browser control with local file resources
body: <p>I'am trying to use the CefSharp.Wpf NuGet package (v79.1.360) to display a simple html web page from disk.</p>
  
  <p>The page has dependencies to local files (javascript, css, etc. ...) in a different directory than the page itself.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="file:///G:/AngularJS/Framework/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="MyApp.css"&gt;
  
      &lt;script src="file:///G:/AngularJS/Framework/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="file:///G:/AngularJS/Framework/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="file:///G:/AngularJS/Framework/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="MyApp.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
              &lt;p class="font-weight-bold"&gt;Select address&lt;/p&gt;
  
              &lt;table class="table table-hover"&gt;
                  &lt;thead&gt;
                      &lt;tr class="bg-primary"&gt;
                          &lt;th scope="col"&gt;ID&lt;/th&gt;
                          &lt;th scope="col"&gt;Name&lt;/th&gt;
                          &lt;th scope="col"&gt;Code&lt;/th&gt;
                          &lt;th scope="col"&gt;City&lt;/th&gt;
                          &lt;th scope="col"&gt;Street&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                  &lt;tbody&gt;
                      &lt;tr ng-repeat="address in Model.AddressList"
                          ng-click="Model.PickRow(address)"
                          ng-style="{'background-color': address.Background}"&gt;
                          &lt;td&gt;{{address.Id}}&lt;/td&gt;
                          &lt;td&gt;{{address.Name}}&lt;/td&gt;
                          &lt;td&gt;{{address.PostalCode}}&lt;/td&gt;
                          &lt;td&gt;{{address.City}}&lt;/td&gt;
                          &lt;td&gt;{{address.Street}}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>I'm able to display the page on a chromium based web browser (Firefox) with modified settings:
  security.fileuri.strict_origin_policy false</em></p>
  
  <p><strong>-> Firefox isn't a chromium based web browser, so I tested it with google chrome and it worked too.</strong></p>
  
  <p>On my web research I found this post related to the issue (unfortunately this post is from 2014):</p>
  
  <p><a href="https://github.com/cefsharp/CefSharp/issues/572" rel="nofollow noreferrer">https://github.com/cefsharp/CefSharp/issues/572</a></p>
  
  <p>So I tried to set the browser settings for the cef sharp control:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Window x:Class="WebControl.MyWebBrowser"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:cefSharpCore="clr-namespace:CefSharp;assembly=CefSharp.Core"
          xmlns:cefSharpWpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
          Height="300" Width="300"&gt;
      &lt;Grid&gt;
          &lt;cefSharpWpf:ChromiumWebBrowser&gt;
              &lt;cefSharpWpf:ChromiumWebBrowser.BrowserSettings&gt;
                  &lt;cefSharpCore:BrowserSettings WebSecurity="Disabled"
                                                FileAccessFromFileUrls="Enabled"
                                                UniversalAccessFromFileUrls="Enabled"/&gt;
              &lt;/cefSharpWpf:ChromiumWebBrowser.BrowserSettings&gt;
          &lt;/cefSharpWpf:ChromiumWebBrowser&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this doesn't work. I also tried to set the settings in the code behind file without success.</p>
  
  <p>Long story short:</p>
  
  <p><a href="https://i.stack.imgur.com/atzSA.png" rel="nofollow noreferrer">Current result</a>
  <a href="https://i.stack.imgur.com/R7sVO.png" rel="nofollow noreferrer">Expected result</a></p>
  
  <p>If someone has a solution please let me know.</p>
  
  <p>Thanks in advance for reading the post :-)</p>