<h4 dir="auto">Challenge Name</h4>

<p dir="auto">Any challenge, <strong>both beta and production</strong></p>
<h4 dir="auto">Issue Description</h4>

<p dir="auto">The exact same code works in Chrome but not in Firefox. In Firefox, the output just above the tests says that the tests were completed, but tests that had to be run in the iframed phone-view never passes.</p>
<p dir="auto">According to this message from the console, there's some problem with CSP which prevents some tests from running properly.<br>
<code class="notranslate">Content Security Policy: Directive ‘frame-src’ has been deprecated. Please use directive ‘child-src’ instead.</code></p>
<p dir="auto">According to <a href="https://stackoverflow.com/questions/30023608/how-to-use-frame-src-and-child-src-in-firefox-and-other-browsers" rel="nofollow">This Stack Overflow-thread</a>, the spec for CSP in iframes is confusing at the moment.</p>
<p dir="auto">I guess we either should use the, according to the SO-thread above, now deprecated <code class="notranslate">child-src</code> <em>temporarily</em> until Firefox implements the new spec with <code class="notranslate">frame-src</code> again.</p>
<p dir="auto">Alternatively, we drop firefox support temporarily and hope they fix this soon.</p>
<p dir="auto"><a class="team-mention js-team-mention notranslate" data-error-text="Failed to load team members" data-id="1720971" data-permission-text="Team members are private" data-url="/orgs/freeCodeCamp/teams/moderators/members" data-hovercard-type="team" data-hovercard-url="/orgs/freeCodeCamp/teams/moderators/hovercard" href="https://github.com/orgs/freeCodeCamp/teams/moderators">@freeCodeCamp/moderators</a> Any ideas on how to solve this?</p>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Browser Name, Version: Firefox 50.1.0</li>
<li>Operating System: Ubuntu 16.04</li>
<li>Mobile, Desktop, or Tablet: Desktop</li>
</ul>
<h4 dir="auto">Your Code</h4>

<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" &lt;style&gt;
  h2 {
    color: blue;
  }
&lt;/style&gt;

&lt;h2&gt;CatPhotoApp&lt;/h2&gt;

&lt;p&gt;Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.&lt;/p&gt;"><pre class="notranslate"> <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  <span class="pl-ent">h2</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> blue;
  }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>CatPhotoApp<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span></pre></div>
<h4 dir="auto">Screenshot</h4>

<p dir="auto">Notice the error message in the console at the bottom of the screen.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6125097/22141335/d8fa6f2c-def1-11e6-9f27-c15141124836.png"><img src="https://cloud.githubusercontent.com/assets/6125097/22141335/d8fa6f2c-def1-11e6-9f27-c15141124836.png" alt="firefox-csp-bug" style="max-width: 100%;"></a></p>
<p dir="auto">The exact same code works just fine in the latest version of Chrome for Ubuntu 16.04.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6125097/22141383/1cbad45e-def2-11e6-8f57-62581b33a6c8.png"><img src="https://cloud.githubusercontent.com/assets/6125097/22141383/1cbad45e-def2-11e6-8f57-62581b33a6c8.png" alt="chrome-firefox-csp-bug" style="max-width: 100%;"></a></p>
<p dir="auto">Trying to complete lessons, but code is becoming unmanageable:</p>
<ul dir="auto">
<li>flags auto duplicate themselves, so instead of <code class="notranslate">&lt;p&gt;</code> I get <code class="notranslate">&lt;pp&gt;</code></li>
<li>same with content, <code class="notranslate">hello</code> paragraph becomes <code class="notranslate">hello world hello world</code></li>
<li>it is undeleteable as every time I move the cursor it repeats again.</li>
</ul>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Mozilla Firefox for Mobile, Version 44 (I believe)</li>
<li>Android 5.1.1</li>
</ul>
<h4 dir="auto">Your Code</h4>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="If relevant(it's not)"><pre lang="html5" class="notranslate"><code class="notranslate">If relevant(it's not)
</code></pre></div>
<h4 dir="auto">Screenshot</h4>
<p dir="auto">Edited format for readability ~ <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/raisedadead/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/raisedadead">@raisedadead</a></p>