常連

### 前提・実現したいこと
Chrome拡張機能のページにYoutube動画を埋め込んでおりYoutube側からSameSiteに関する警告文がたくさんきます。このエラーは拡張機能の一覧画面で「エラー」と表記されて大量に残っていってしまうためこれをなくしたいと考えます。


### 発生している問題・エラーメッセージ

```
A cookie associated with a cross-site resource at http://youtube.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
```
みなさんご存知なメッセージですが、上記のようにクロスサイトに関連したクッキーにSameSite属性がついていません。と表示されます。
サーバー側(Youtube側)の方で設定することだと思うのでSameSite属性に関してはこちらから何かできることはないのかなと思います。

ですがその上でフロント側から警告文を表示させないようにする方法はありませんでしょうか。

Chromeのflagページからブラウザ設定する方法は拡張機能を利用する一人ひとりに対してお願いするのは現実的ではないと考えています。

SameSiteに関する警告文をブラウザ側で表示させないようにしたい【Chrome】

### 前提・実現したいこと
phpを使ったWebフォームのXSS対策として、httpヘッダーで nonceを使ったContent-Security-Policy: script-src 'strict-dynamic'を設定しようとしています。
挙動自体は問題なく、nonceが一致したscriptだけが実行されるようにはなったのですが、firefoxのコンソール上で、警告が表示されてしまうのが気にかかっています。

### 該当のソースコード

```php
header("Content-Security-Policy: script-src 'nonce-$nonce' 'unsafe-inline' 'strict-dynamic' https: http: ;");
```
![イメージ説明](e07317c9b0545fb3fc0f449cfce257a7.png)

CSP3をサポートしていれば、nonce値と'strict-dynamic'以外は無視されるため、コンソールに表示されている警告は「無視しましたよ」という事実だけを表示しているものだと認識しているのですが、このままにしておいて良いのか、ブラウザによってheader関数を出しわける？等をした方が良いのかわかりません。。


#####ここから追記
safariがCSP3非対応で、動的に生成されたscriptは（親のnonceが合っていても）実行されないようなので、結局ブラウザによるhttpヘッダーの出し分けが必要なのかな、と思いました。

[https://caniuse.com/?search=csp](https://caniuse.com/?search=csp)
[https://caniuse.com/?search=strict-dynamic](https://caniuse.com/?search=strict-dynamic)

GTMタグをインラインで入れているので、nonceをサポートしないブラウザ（IEなど）は'unsafe-inline'を適用することになるのですが、そうなると結局IEではXSSできてしまうということでしょうか？皆さんどうしているのでしょう。。

「ブラウザごとによってこうやってCSP出し分けてるよ（もしくはCSPなんて全く使ってないよ、でも。）」というのがあれば是非ご教示いただきたいです。

httpヘッダーでContent-Security-Policy: 'strict-dynamic'を指定した場合のfirefoxでのコンソール警告について

今、模擬制作をしております。
PC表記の際に、右側に来る要素（セクションタイトル）が、スマホ画面になると下に表示されます。
（ここはそうなるだろうと認識済みです。）

これをスマホ画面の時だけ上の方に表示させるためにはCSSをどの様に表記したら良いかご教授頂きたく思います。
よろしくお願い申し上げます。

```HTML
 
     <section class="ftco-section pitching-section">
      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-md-6 pitching-desc">
            <div class="program d-flex ftco-animate">
              <div class="icon d-flex justify-content-center align-items-center">
                <span class="flaticon-gym"></span>
              </div>
              <div class="text ml-5">
                <h3>基礎運動量の向上</h3>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
              </div>
            </div>
            <div class="program d-flex ftco-animate">
              <div class="icon d-flex justify-content-center align-items-center">
                <span class="flaticon-running"></span>
              </div>
              <div class="text ml-5">
                <h3>壊れない体作り</h3>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
              </div>
            </div>
            <div class="program d-flex ftco-animate">
              <div class="icon d-flex justify-content-center align-items-center">
                <span class="flaticon-stationary-bike"></span>
              </div>
              <div class="text ml-5">
                <h3>筋力</h3>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
              </div>
            </div>
            
            
          </div>

          <div class="col-md-6 pr-md-5 pitching-title">
            <div class="heading-section text-md-right ftco-animate">
              <span class="subheading">Training</span>
              <h2 class="mb-4">セクションタイトル</h2>
              <p></p>
             
              <p><a href="#" class="btn btn-primary btn-outline-primary px-4 py-3">申し込みをする</a></p>
            </div>
          </div>


        </div>
      </div>
    </section>
```

```css
.pitching-section{
  display: flex;
  flex-direction: row;
}

@media (max-width: 480px) {
    .pitching-section {
        flex-direction: column;
    }
    .pitching-title {
        order: 1;
    }
    .pitching-desc {
        order: 2;
    }
}
コード
```