Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

React Helmet 介紹

特色

可以在很深層的 React components 放 head 應該要出現的東西，只要用 Helmet 包起來，它就自動幫你放進 head

如果你用 Next.js，其實用 next/head 就可以了
https://nextjs.org/docs/api-reference/next/head

注意事項：不能把 custom component 放進 Helmet 作為 children

https://github.com/nfl/react-helmet/issues/405

例如：

<Helmet>
  <CustomComponent />
</Helmet>

  • 會得到錯誤訊息 Helmet.js You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.

  • 而且 Helmet 不會去幫你 render 裡面的 custom components，DevTool 找不到我要的東西

其實 Helmet 會去檢查 children 的 type 是不是 function，如果是的話給 warning，而且不會 render 該 function

學到的事情

  1. Helmet 底下只能放 html tags，不能給 custom components
  2. warning 訊息可以拿去 source code 搜尋，找到它發 warning 的機制。例如這個例子是他會去檢查 child.type === "function"

相關

遇到錯誤的策略 Bug Fixing Strategy

Part2

  • Helmet 的 render 方法是直接設 innerHTML (no escape)，和 React 很不一樣

  • React 會幫你 escape [>, <, ', ", &] 這些字串來防止 XSS 攻擊，他會幫你 replace 這些字串成 HTML Entities (除了 components 的 <>)，只有 dangerouslySetInnerHTML 才不會 escape、直接設 innerHTML

  • 攻擊方法：先把前面的 script 關起來，再開一個自己的 script 寫 XSS 攻擊式

  • 如果 lng 可控：

  • <StructureData data={structureDataLogo('