常連

注目の的

自己紹介

有名人

###前提・実現したいこと
youtubeの埋め込み動画のvideo要素を取得したいです。調べたらjQueryを使わない場合はcontentWindow.documentを使うらしいのですがうまくいきません。どうしたらいいでしょうか。
###該当のソースコード
```javascript
const a = 'https://www.youtube.com/embed/';
const YouTube = `iframe[src^="${a}"]`;
const iframe = document.querySelector(YouTube).contentWindow.document;
```

iframe内の要素を取得したい

###前提・実現したいこと
Monacaにてタブ切り替え時にWebViewを表示させるためのアプリを作っています。
Onsen UIのOnsen UI V2 JS Tabbarのテンプレートを使用し、画面下部のタブ切り替えた際に指定したURLのWebViewが開く機能を実装中にエラーが発生しています。

###発生している問題・エラーメッセージ

```
Mixed Content: The page at 'https://ide.monaca.mobi/project/59c55187013eb0627411d459' was loaded over HTTPS, but requested an insecure resource 'http://minatogawa-mart.net/news/'. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ onsenui.min.js:21
```

###該当のソースコード
```ここに言語を入力
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
      }
    });
  </script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">
        <iframe src="http://www.livedoor.com/" width="100%" height="100%"></iframe>
    </ons-page>
  </ons-template>
  <ons-template id="tab2.html">
    <ons-page id="second-page">
    </ons-page>
  </ons-template>
</body>
</html>
```

###試したこと
テンプレートから<iframe>タグを付け加えただけのシンプルな記述になります。
セキュアなサイトでもエラーになりました。
Onsen UIのOnsen UI V2 JS Minimumのテンプレートで<iframe>を記述した際にはWeb Viewが機能しました。
エラーになるときは、実機デバッグを実行した際にMonacaの画面のまま画面遷移しません。

###補足情報(言語/FW/ツール等のバージョンなど)
基本的な質問で恐縮ですが、ご存知の方がいらっしゃいましたら、コメントをいただけると幸いです。
どうぞ宜しくお願いします。

MonacaでWebViewを表示させたいです

表題の通りなのですが、認証用トークン（具体的にはJWTトークン）はクッキーに保存すべきでしょうか？
ローカルストレージに保存すべきでしょうか？

クッキーに保存してリクエストヘッダーにクッキーに保存しておいたトークンを入れてリクエストを送信するといったやり方の方がセキュアでしょうか？

# 補足
前提として、ユーザーがログインに成功するとサーバー側から生成されたJWTトークンがクライアント側に送られてくるという仕様を想定しての話となります。そのトークンをクッキーに保存するべきか、もしくは、ローカルストレージに保存すべきかといった質問内容です。よろしくお願いいたします！

# 参考
https://stackoverflow.com/questions/34817617/should-jwt-be-stored-in-localstorage-or-cookie

- localStorage is subjected to XSS and generally it's not recommended to store any sensitive information in it.

- With Cookies we can apply the flag "httpOnly" which mitigates the risk of XSS. However if we are to read the JWT from Cookies on backend, we then are subjected to CSRF.


So based on the above premise - it will be best if we store JWT in Cookies. On every request to server, the JWT will be read from Cookies and added in the Authorization header using Bearer scheme. The server can then verify the JWT in the request header (as opposed to reading it from the cookies).