Skip to content

Add support for passing a CSP nonce through to the templates #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add support for passing a CSP nonce through to the templates #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 20 additions & 7 deletions lib/absinthe/plug/graphiql.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,21 +133,29 @@ defmodule Absinthe.Plug.GraphiQL do
:defp,
:graphiql_html,
Path.join(@graphiql_template_path, "graphiql.html.eex"),
[:query_string, :variables_string, :result_string, :socket_url, :assets]
[:query_string, :variables_string, :result_string, :socket_url, :assets, :csp_nonce]
)

EEx.function_from_file(
:defp,
:graphiql_workspace_html,
Path.join(@graphiql_template_path, "graphiql_workspace.html.eex"),
[:query_string, :variables_string, :default_headers, :default_url, :socket_url, :assets]
[
:query_string,
:variables_string,
:default_headers,
:default_url,
:socket_url,
:assets,
:csp_nonce
]
)

EEx.function_from_file(
:defp,
:graphiql_playground_html,
Path.join(@graphiql_template_path, "graphiql_playground.html.eex"),
[:default_url, :socket_url, :assets]
[:default_url, :socket_url, :assets, :csp_nonce]
)

@behaviour Plug
Expand All @@ -165,7 +173,8 @@ defmodule Absinthe.Plug.GraphiQL do
default_url: binary,
assets: Keyword.t(),
socket: module,
socket_url: binary
socket_url: binary,
csp_nonce_assign_key: binary
]

@doc false
Expand All @@ -182,6 +191,7 @@ defmodule Absinthe.Plug.GraphiQL do
|> Map.put(:socket, Keyword.get(opts, :socket))
|> Map.put(:socket_url, Keyword.get(opts, :socket_url))
|> Map.put(:default_query, Keyword.get(opts, :default_query, ""))
|> Map.put(:csp_nonce_assign_key, Keyword.get(opts, :csp_nonce_assign_key, ""))
|> set_pipeline
end

Expand Down Expand Up @@ -347,7 +357,8 @@ defmodule Absinthe.Plug.GraphiQL do
opts[:var_string],
opts[:result],
opts[:socket_url],
opts[:assets]
opts[:assets],
conn.assigns[opts[:csp_nonce_assign_key]]
)
|> rendered(conn)
end
Expand All @@ -361,7 +372,8 @@ defmodule Absinthe.Plug.GraphiQL do
opts[:default_headers],
default_url(opts[:default_url]),
opts[:socket_url],
opts[:assets]
opts[:assets],
conn.assigns[opts[:csp_nonce_assign_key]]
)
|> rendered(conn)
end
Expand All @@ -372,7 +384,8 @@ defmodule Absinthe.Plug.GraphiQL do
graphiql_playground_html(
default_url(opts[:default_url]),
opts[:socket_url],
opts[:assets]
opts[:assets],
conn.assigns[opts[:csp_nonce_assign_key]]
)
|> rendered(conn)
end
Expand Down
16 changes: 8 additions & 8 deletions lib/absinthe/plug/graphiql/graphiql.html.eex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ add "&raw" to the end of the URL within a browser.

<title>GraphiQL</title>

<style>
<style nonce="<%= csp_nonce %>">
html, body {
height: 100%;
margin: 0;
Expand All @@ -25,16 +25,16 @@ add "&raw" to the end of the URL within a browser.
height: 100%;
}
</style>
<link href="<%= assets["graphiql/graphiql.css"] %>" rel="stylesheet" />
<link href="<%= assets["graphiql/graphiql.css"] %>" rel="stylesheet" nonce="<%= csp_nonce %>" />
</head>
<body>
<div id="root"></div>
<script src="<%= assets["whatwg-fetch/fetch.js"] %>"></script>
<script src="<%= assets["react/react.js"] %>"></script>
<script src="<%= assets["react-dom/react-dom.js"] %>"></script>
<script src="<%= assets["graphiql/graphiql.js"] %>"></script>
<script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>"></script>
<script>
<script src="<%= assets["whatwg-fetch/fetch.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["react/react.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["react-dom/react-dom.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["graphiql/graphiql.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>" nonce="<%= csp_nonce %>"></script>
<script nonce="<%= csp_nonce %>">
// Collect the URL parameters
var parameters = {};
window.location.search.substr(1).split('&').forEach(function (entry) {
Expand Down
12 changes: 6 additions & 6 deletions lib/absinthe/plug/graphiql/graphiql_playground.html.eex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ add "&raw" to the end of the URL within a browser.

<title>GraphiQL Playground</title>

<link href="<%= assets["typeface-open-sans/index.css"] %>" rel="stylesheet">
<link href="<%= assets["typeface-source-code-pro/index.css"] %>" rel="stylesheet">
<link rel="stylesheet" media="screen" href="<%= assets["@absinthe/graphql-playground/playground.css"] %>">
<link href="<%= assets["typeface-open-sans/index.css"] %>" rel="stylesheet" nonce="<%= csp_nonce %>">
<link href="<%= assets["typeface-source-code-pro/index.css"] %>" rel="stylesheet" nonce="<%= csp_nonce %>">
<link rel="stylesheet" media="screen" href="<%= assets["@absinthe/graphql-playground/playground.css"] %>" nonce="<%= csp_nonce %>">
</head>
<body>
<div id="root">
<style>
<style nonce="<%= csp_nonce %>">
body {
background-color: #172a3a;
font-family: Open Sans, sans-serif;
Expand Down Expand Up @@ -54,7 +54,7 @@ add "&raw" to the end of the URL within a browser.
<span class="title">GraphQL Playground</span>
</div>
</div>
<script>
<script nonce="<%= csp_nonce %>">
var options = {};
var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";

Expand All @@ -66,6 +66,6 @@ add "&raw" to the end of the URL within a browser.

window.addEventListener("load", function (n) { GraphQLPlayground.init(document.getElementById("root"), options) })
</script>
<script type="text/javascript" src="<%= assets["@absinthe/graphql-playground/playground.js"] %>"></script>
<script type="text/javascript" src="<%= assets["@absinthe/graphql-playground/playground.js"] %>" nonce="<%= csp_nonce %>"></script>
</body>
</html>
16 changes: 8 additions & 8 deletions lib/absinthe/plug/graphiql/graphiql_workspace.html.eex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ add "&raw" to the end of the URL within a browser.

<title>GraphiQL Workspace</title>

<link rel="stylesheet" media="screen" href="<%= assets["bootstrap/css/bootstrap.css"] %>">
<link rel="stylesheet" media="screen" href="<%= assets["graphiql/graphiql.css"] %>">
<link rel="stylesheet" media="screen" href="<%= assets["graphiql-workspace/graphiql-workspace.css"] %>">
<link rel="stylesheet" media="screen" href="<%= assets["bootstrap/css/bootstrap.css"] %>" nonce="<%= csp_nonce %>">
<link rel="stylesheet" media="screen" href="<%= assets["graphiql/graphiql.css"] %>" nonce="<%= csp_nonce %>">
<link rel="stylesheet" media="screen" href="<%= assets["graphiql-workspace/graphiql-workspace.css"] %>" nonce="<%= csp_nonce %>">
</head>
<body>
<div id="root" class="graphiql-workspace"></div>
<script src="<%= assets["react/react.js"] %>"></script>
<script src="<%= assets["react-dom/react-dom.js"] %>"></script>
<script src="<%= assets["graphiql-workspace/graphiql-workspace.js"] %>"></script>
<script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>"></script>
<script type="text/javascript">
<script src="<%= assets["react/react.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["react-dom/react-dom.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["graphiql-workspace/graphiql-workspace.js"] %>" nonce="<%= csp_nonce %>"></script>
<script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>" nonce="<%= csp_nonce %>"></script>
<script type="text/javascript" nonce="<%= csp_nonce %>">
function absintheSubscriptionsClientBuilder(url, connectionParams) {

const urlObject = new URL(url);
Expand Down