search

ECMaker / blog

https://blog.ec-maker.com/
0 stars 0 forks source link

F12 bug 撲滅 #77

Closed u-ecmaker closed 1 month ago

u-ecmaker commented 7 months ago

image


framework-2c79e2a64abdb08b.js:9 Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at rh (framework-2c79e2a64abdb08b.js:9:40169)
    at framework-2c79e2a64abdb08b.js:9:103474
    at oD (framework-2c79e2a64abdb08b.js:9:106224)
    at oO (framework-2c79e2a64abdb08b.js:9:99172)
    at framework-2c79e2a64abdb08b.js:9:98979
    at oF (framework-2c79e2a64abdb08b.js:9:98986)
    at oS (framework-2c79e2a64abdb08b.js:9:94025)
    at x (framework-2c79e2a64abdb08b.js:33:1373)
    at MessagePort.T (framework-2c79e2a64abdb08b.js:33:1903)
3
framework-2c79e2a64abdb08b.js:9 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at lh (framework-2c79e2a64abdb08b.js:9:46422)
    at i (framework-2c79e2a64abdb08b.js:9:121159)
    at oO (framework-2c79e2a64abdb08b.js:9:99112)
    at framework-2c79e2a64abdb08b.js:9:98979
    at oF (framework-2c79e2a64abdb08b.js:9:98986)
    at oS (framework-2c79e2a64abdb08b.js:9:94025)
    at x (framework-2c79e2a64abdb08b.js:33:1373)
    at MessagePort.T (framework-2c79e2a64abdb08b.js:33:1903)
framework-2c79e2a64abdb08b.js:9 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at i (framework-2c79e2a64abdb08b.js:9:120828)
    at oO (framework-2c79e2a64abdb08b.js:9:99112)
    at framework-2c79e2a64abdb08b.js:9:98979
    at oF (framework-2c79e2a64abdb08b.js:9:98986)
    at ox (framework-2c79e2a64abdb08b.js:9:95738)
    at oS (framework-2c79e2a64abdb08b.js:9:94293)
    at x (framework-2c79e2a64abdb08b.js:33:1373)
    at MessagePort.T (framework-2c79e2a64abdb08b.js:33:1903)
blog.ec-maker.com/:1 Third-party cookie will be blocked. Learn more in the Issues tab.
```
u-ecmaker commented 1 month ago

chat GPT 4o を使ったら一瞬で解決した。 3.5とは偉い違いだ。2-3段階進んだ気がする。

u-ecmaker commented 1 month ago

ToDo

上の赤ワーニングは解決したが、下の問題は残った。
image

タグマネージャーの某? とか出てきたので一旦ここで止めてマージする。

次の問題です

Content Security Policy of your site blocks the use of 'eval' in JavaScript`
The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.

⚠️ Allowing string evaluation comes at the risk of inline script injection.

1 件のディレクティブ
ソースの場所  ディレクティブ ステータス
script-src  ブロック中
詳細: コンテンツ セキュリティ ポリシー - Eval

このエラーは、Content Security Policy (CSP) により、evalやnew Function()などの文字列評価がブロックされていることを示しています。CSPは、サイトに不正なコードが注入されるリスクを減らすために、これらの操作を制限しています。 対処方針

  1. evalやnew Function()の使用を避ける: これらの関数を使用している箇所を特定し、代替手段を検討してください。通常、これらの関数は必要ない場合が多く、他の方法で同じ機能を実現できることが多いです。
  2. setTimeoutやsetIntervalの文字列引数を避ける: これらの関数に文字列を渡すのではなく、関数を渡すようにしてください。
  3. CSPの設定を見直す: どうしても必要な場合は、CSPのscript-srcディレクティブにunsafe-evalを追加することもできますが、これはセキュリティリスクを伴います。 解決策 以下は、evalやnew Function()の使用を避けるための一般的な例です。

このエラーは、Content Security Policy (CSP) によってevalやnew Function()などの文字列評価がブロックされていることを示しています。CSPは、サイトに不正なコードが注入されるリスクを減らすために、これらの操作を制限しています。 対処方針 evalやnew Function()の使用を避ける: これらの関数を使用している箇所を特定し、代替手段を検討してください。通常、これらの関数は必要ない場合が多く、他の方法で同じ機能を実現できることが多いです。

  1. setTimeoutやsetIntervalの文字列引数を避ける: これらの関数に文字列を渡すのではなく、関数を渡すようにしてください。
  2. CSPの設定を見直す: どうしても必要な場合は、CSPのscript-srcディレクティブにunsafe-evalを追加することもできますが、これはセキュリティリスクを伴います。 解決策 以下は、evalやnew Function()の使用を避けるための一般的な例です。 evalの代替 
    
// evalの使用例
// const result = eval('2 + 2');

// 代替手段 const result = 2 + 2;

setTimeoutの代替

// setTimeoutの文字列引数の使用例 // setTimeout('console.log("Hello")', 1000);

// 代替手段 setTimeout(() => { console.log("Hello"); }, 1000);


注意点
セキュリティリスク: unsafe-evalをCSPに追加するのは、セキュリティリスクを伴います。可能な限り、コードのリファクタリングを行い、evalやnew Function()の使用を避けるようにしてください。
このようにして、CSPの制限を回避しつつ、セキュリティを維持することができます。詳細については、Google DevelopersのCSPガイドを参照してください。

---

本家noblog様でも発生していた。  

同様に以下全てで発生していた。。
 - 本家 noblog様
 - JJKasperさんのnotion-blog 
 - かなるさんのnotion-blog  
 - astro-notion-blog

発生するのが一般的らしい( ) ということで、ここで止める。

![image](https://github.com/user-attachments/assets/3d79b27d-2f15-41e1-afa9-76ed22635223)
u-ecmaker commented 1 month ago

これか？ image

u-ecmaker commented 1 month ago

((PR1 (old))) 中止 PR #79 を参照。branch削除。

PR2 #80 → やめた。

一旦、noblog様の最新 11sep2023 main を持ってきて、エラーシュート。

PR3-4 git操作ミス deleted.

PR5 #84 方針転換→基本的にはこれでクリア

最新のnoblog様は持ってこずに、過去のnoblog様ベースのそのままエラーシュート。

PR6 #86 残り。

まだ一つだけ消えないので、考えられる処置を講じてみる

84

基本的にはできた image

86 ToDo

slugの404が残った

GET  main-4da6185358dbe7bf.js:1 
https://blog.ec-maker.com/_next/data/5es-RMvshMZBpDtlX3sya/posts/%5Bslug%5D.json?slug=%5Bslug%5D 404 (Not Found)

image

u-ecmaker commented 1 month ago

slugの404は解決。 #89 が原因。

ToDo

エラーの出るブロックへの対処 image

Youtubeは解決 残りはadBlockによるものだと分かった。シークレットモードではerrorにならない。 image

すべてのブロックの確認

previewページを参照してみる。→ #90
image

u-ecmaker commented 1 month ago

残るエラーの出るブロックへの対処

すべてのブロックの確認。
切り出した→ #90

TIkTokの埋め込みはエラーが残ったが解なしとして残置する。

本家Notionの埋め込みでもエラーとなるのでしょうがない。 おそらく提供されているembedコードに間違いがある。

対策のしようが無いのでクローズ。
image

すべてのブロックで確認

previewページを参照してみた。→ #90
https://blog.ec-maker.com/posts/Notion-Block-Preview
image