feat: App router migration for Next.js 13 #111
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![semgrep-app[bot]](https://avatars.githubusercontent.com/in/60555?s=60&v=4){kind=small}
Comment on lines
+58
to
+71
| __html: prependCheck(` | ||
| window.fbAsyncInit = function() { | ||
| FB.init({ | ||
| xfbml : true, | ||
| version : 'v13.0' | ||
| }); | ||
| }; | ||
| (function(d, s, id) { | ||
| var js, fjs = d.getElementsByTagName(s)[0]; | ||
| if (d.getElementById(id)) return; | ||
| js = d.createElement(s); js.id = id; | ||
| js.src = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js'; | ||
| fjs.parentNode.insertBefore(js, fjs); | ||
| }(document, 'script', 'facebook-jssdk'));`), |
There was a problem hiding this comment.
Detection of dangerouslySetInnerHTML from non-constant definition. This can inadvertently expose users to cross-site scripting (XSS) attacks if this comes from user-provided input. If you have to use dangerouslySetInnerHTML, consider using a sanitization library such as DOMPurify to sanitize your HTML.
View Dataflow Graph
flowchart LR
classDef invis fill:white, stroke: none
classDef default fill:#e7f5ff, color:#1c7fd6, stroke: none
subgraph File0["<b>src/app/custom-script.tsx</b>"]
direction LR
%% Source
subgraph Source
direction LR
v0["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L14 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 14] inputScript</a>"]
end
%% Intermediate
subgraph Traces0[Traces]
direction TB
v2["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L14 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 14] inputScript</a>"]
v3["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L58 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 58] prependCheck</a>"]
end
v2 --> v3
%% Sink
subgraph Sink
direction LR
v1["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L58 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 58] prependCheck(`<br> window.fbAsyncInit = function() {<br> FB.init({<br> xfbml : true,<br> version : 'v13.0'<br> });<br> };<br> (function(d, s, id) {<br> var js, fjs = d.getElementsByTagName(s)[0];<br> if (d.getElementById(id)) return;<br> js = d.createElement(s); js.id = id;<br> js.src = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js';<br> fjs.parentNode.insertBefore(js, fjs);<br> }(document, 'script', 'facebook-jssdk'));`)</a>"]
end
end
%% Class Assignment
Source:::invis
Sink:::invis
Traces0:::invis
File0:::invis
%% Connections
Source --> Traces0
Traces0 --> Sink
Comment on lines
+46
to
+51
| __html: prependCheck(` | ||
| (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | ||
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | ||
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= | ||
| 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | ||
| })(window,document,'script','dataLayer','${trackingSettings?.googleTagManager?.id}');`), |
There was a problem hiding this comment.
Detection of dangerouslySetInnerHTML from non-constant definition. This can inadvertently expose users to cross-site scripting (XSS) attacks if this comes from user-provided input. If you have to use dangerouslySetInnerHTML, consider using a sanitization library such as DOMPurify to sanitize your HTML.
View Dataflow Graph
flowchart LR
classDef invis fill:white, stroke: none
classDef default fill:#e7f5ff, color:#1c7fd6, stroke: none
subgraph File0["<b>src/app/custom-script.tsx</b>"]
direction LR
%% Source
subgraph Source
direction LR
v0["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L14 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 14] inputScript</a>"]
end
%% Intermediate
subgraph Traces0[Traces]
direction TB
v2["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L14 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 14] inputScript</a>"]
v3["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L46 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 46] prependCheck</a>"]
end
v2 --> v3
%% Sink
subgraph Sink
direction LR
v1["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L46 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 46] prependCheck(`<br> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br> j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=<br> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br> })(window,document,'script','dataLayer','${trackingSettings?.googleTagManager?.id}');`)</a>"]
end
end
%% Class Assignment
Source:::invis
Sink:::invis
Traces0:::invis
File0:::invis
%% Connections
Source --> Traces0
Traces0 --> Sink
Comment on lines
+35
to
+39
| __html: prependCheck(`(function(c,l,a,r,i,t,y){ | ||
| c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; | ||
| t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; | ||
| y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); | ||
| })(window, document, "clarity", "script", "${trackingSettings?.microsoftClarity?.id}");`), |
There was a problem hiding this comment.
Detection of dangerouslySetInnerHTML from non-constant definition. This can inadvertently expose users to cross-site scripting (XSS) attacks if this comes from user-provided input. If you have to use dangerouslySetInnerHTML, consider using a sanitization library such as DOMPurify to sanitize your HTML.
View Dataflow Graph
flowchart LR
classDef invis fill:white, stroke: none
classDef default fill:#e7f5ff, color:#1c7fd6, stroke: none
subgraph File0["<b>src/app/custom-script.tsx</b>"]
direction LR
%% Source
subgraph Source
direction LR
v0["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L14 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 14] inputScript</a>"]
end
%% Intermediate
subgraph Traces0[Traces]
direction TB
v2["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L14 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 14] inputScript</a>"]
v3["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L35 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 35] prependCheck</a>"]
end
v2 --> v3
%% Sink
subgraph Sink
direction LR
v1["<a href=https://github.com/dazedbear/dazedbear.github.io/blob/71d2c44469963b3ff30d70931ef4aa48462c7922/src/app/custom-script.tsx#L35 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 35] prependCheck(`(function(c,l,a,r,i,t,y){<br> c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};<br> t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;<br> y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);<br> })(window, document, "clarity", "script", "${trackingSettings?.microsoftClarity?.id}");`)</a>"]
end
end
%% Class Assignment
Source:::invis
Sink:::invis
Traces0:::invis
File0:::invis
%% Connections
Source --> Traces0
Traces0 --> Sink
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Comment on lines
+35
to
+39
| __html: prependCheck(`(function(c,l,a,r,i,t,y){ | ||
| c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; | ||
| t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; | ||
| y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); | ||
| })(window, document, "clarity", "script", "${trackingSettings?.microsoftClarity?.id}");`), |
Check warning
Code scanning / Semgrep PRO
Semgrep Finding: typescript.react.security.audit.react-dangerouslysetinnerhtml.react-dangerouslysetinnerhtml Warning
Comment on lines
+46
to
+51
| __html: prependCheck(` | ||
| (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | ||
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | ||
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= | ||
| 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | ||
| })(window,document,'script','dataLayer','${trackingSettings?.googleTagManager?.id}');`), |
Check warning
Code scanning / Semgrep PRO
Semgrep Finding: typescript.react.security.audit.react-dangerouslysetinnerhtml.react-dangerouslysetinnerhtml Warning
Comment on lines
+58
to
+71
| __html: prependCheck(` | ||
| window.fbAsyncInit = function() { | ||
| FB.init({ | ||
| xfbml : true, | ||
| version : 'v13.0' | ||
| }); | ||
| }; | ||
| (function(d, s, id) { | ||
| var js, fjs = d.getElementsByTagName(s)[0]; | ||
| if (d.getElementById(id)) return; | ||
| js = d.createElement(s); js.id = id; | ||
| js.src = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js'; | ||
| fjs.parentNode.insertBefore(js, fjs); | ||
| }(document, 'script', 'facebook-jssdk'));`), |
Check warning
Code scanning / Semgrep PRO
Semgrep Finding: typescript.react.security.audit.react-dangerouslysetinnerhtml.react-dangerouslysetinnerhtml Warning
github-actions bot
pushed a commit
that referenced
this pull request
Jun 10, 2024
## [4.36.0](v4.35.0...v4.36.0) (2024-06-10) ### Features * App router migration for Next.js 13 ([#111](#111)) ([be80d32](be80d32))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Goal
As a follow-up to #109, migrate all page routers to app routers.
pagestoapprouter (including page & API routes)/api/postsrouteog:titlelocator of e2e testingex: http://local.dazedbear.pro:3000/article/Ep-1-8e415ca114a94a95bee9bd8ed75eed66
Reference