Comments (8)
ottokruse
commented on July 19, 2024
That shouldn't happen! I'm very interested to learn why it happens, so we can make the code more robust.
Can you check the nonce value in your "spa-auth-edge-nonce" cookie and compare it to the value in the URL query string? Is there anything special with the values - maybe some special character issue that only occurs every now and then (as nonces are generated automatically, there might only be a small chance to hit the specific character that raises this).
from cloudfront-authorization-at-edge.
ottokruse
commented on July 19, 2024
Any updates on this?
from cloudfront-authorization-at-edge.
ottokruse
commented on July 19, 2024
Closing for now
from cloudfront-authorization-at-edge.
alexantom
commented on July 19, 2024
@ottokruse looks like i might have found the root cause of the issue, still to figure out a fix.
the sample app is having
- HTML Page
m3u8video stream files in s3 bucket
both in same bucket and served through same cloudfront. intention was to secure all assets request.
As i'm trying to stream the video using videojs, there is frequent request to cloudfront.
let's say the access token is expired when the page was idle, videojs still try to request the video files and will get stuck at the auth flow as the request is xhr, which might result in nonce value to be changed.
Not sure if was able to articulate the issue well
from cloudfront-authorization-at-edge.
alexantom
commented on July 19, 2024
Sample HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
<title>Home</title>
<!--
Uses the latest versions of video.js and videojs-contrib-hls.
To use specific versions, please change the URLs to the form:
<link href="https://unpkg.com/[email protected]/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.js"></script>
<script src="https://unpkg.com/[email protected]/dist/videojs-contrib-hls.js"></script>
-->
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="./script.js"></script>
<style>
/* Typography imported from Google Fonts */
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", sans-serif;
}
p, a {
font-family: 'Source Sans Pro', sans-serif;
}
/* Generic styles */
html {
scroll-behavior: smooth;
}
a {
background-color: goldenrod;
text-decoration: none;
color: white;
border-radius: .25rem;
text-align: center;
display: inline-block;
transition: all .3s;
}
a:hover {
opacity: .6;
}
/* Styles for the hero image */
.hero {
/* Photo by mnm.all on Unsplash */
background-size: cover;
padding: 4rem 2rem;
/* grid styles */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
align-items: center;
}
.hero > * {
color: white;
}
.hero > h1 {
font-size: 4rem;
padding-bottom: 1rem;
}
.hero > article > p {
font-size: 1.5rem;
font-weight: 200;
}
.hero > article > a {
padding: 1rem;
margin-top: .75rem;
}
/* breweries styles */
.breweries {
padding: 2rem;
}
.breweries > ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 2rem;
padding: 0;
}
.breweries > ul > li {
border: 1px solid #E2E2E2;
border-radius: .5rem;
}
.breweries > ul > li > figure {
max-height: 220px;
overflow: hidden;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
position: relative;
}
.breweries > ul > li > figure > img {
width: 100%;
}
.breweries > ul > li > figure > figcaption {
position: absolute;
bottom: 0;
background-color: rgba(0,0,0,.7);
width: 100%;
}
.breweries > ul > li > figure > figcaption > h3 {
color: white;
padding: .75rem;
font-size: 1.25rem;
}
.breweries > ul > li > p {
/*font-size: 1rem;*/
line-height: 1.5;
/*padding: 1rem .75rem;*/
color: white;
font-weight: bold;
font-size: 1rem;
padding: 0.75rem;
margin: 0;
border-radius: 0 0 0.5rem 0.5rem;
background: teal;
}
.breweries > ul > li > a {
padding: .5rem 1rem;
margin: .5rem;
}
/* footer */
footer {
background-color: #333;
padding: .5rem;
color: white;
text-align: center;
font-size: .5rem;
}
li {
list-style: none;
}
body {
background: #EAEDF3;
margin: 0;
}
.title-header {
background: teal;
margin: 0;
color: white;
font-size: 1.2rem;
padding: 1rem;
}
</style>
</head>
<body>
<main class="wrapper">
<h1 class="title-header">Header</h1>
<section class="breweries" id="breweries">
<ul>
<li>
<img src="/assets/bugatti.jpg" width="100%" height="300">
<p>
Bugatti
</p>
</li>
<li>
<img src="/ferrari.jpg" width="100%" height="300">
<p>
Ferrari
</p>
</li>
<li>
<img src="/bmw.jpg" width="100%" height="300">
<p>
BMW
</p>
</li>
<li>
<video id="my_video_4" style="width:100%" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="/media/bbb/hls/bbb_sunflower_1080p_60fps_normal2.m3u8" type="application/x-mpegURL">
</video>
<p>
Video Stream
</p>
</li>
</ul>
</section>
</main>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
</body>
</html>
from cloudfront-authorization-at-edge.
ottokruse
commented on July 19, 2024
let's say the access token is expired when the page was idle, videojs still try to request the video files and will get stuck at the auth flow as the request is xhr, which might result in nonce value to be changed.
Plausible explanation. The easiest solution might then be to refresh the tokens every so often using a bit of JavaScript?
If you do it with Amplify you can just call Auth.currentSession() e.g. every 5 minutes, that will refresh tokens when needed:
from cloudfront-authorization-at-edge.
ottokruse
commented on July 19, 2024
Idea is then: prevent the tokens from expiring, on the "main thread" so to speak, the main HTML page.
Because if they expired, and your browser makes parallel XHR's that trigger the sign-in/refresh, that might lead to nonce mismatches, as each XHR triggers a new nonce and updates that into the 1 nonce cookie.
A development opportunity for this repo might be to prevent parallel refresh attempts from writing to the same nonce cookie.
from cloudfront-authorization-at-edge.
ottokruse
commented on July 19, 2024
A development opportunity for this repo might be to prevent parallel refresh attempts from writing to the same nonce cookie.
I tried this but was dissatisfied at the amount of code it took. For now I'm gonna close this issue in favior of the solution: prevent the tokens from expiring, on the "main thread". Prevent parallel XHR's using expired tokens.
from cloudfront-authorization-at-edge.
Related Issues (20)
- CloudFormation did not receive a response from your Custom Resource HOT 19
- Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”) HOT 2
- Refresh issue after token expires HOT 8
- On signout Required String parameter 'redirect_uri' is not present HOT 5
- Possible Open Redirect (CWE-601) in sample code HOT 2
- nonce cookies are not expired HOT 1
- [Feature request] Support multiple Cognito user pool clients HOT 4
- custom domain is not redirecting to cognito hosted ui HOT 1
- Getting blocked by CORS policy but unable to figure out the source HOT 5
- Node version bump HOT 7
- Custom IDP with Amplify and Auth at Edge HOT 9
- Fail on delete of the stack HOT 3
- Function must be in an Active state error on deploying the solution HOT 7
- Errors from Lambda when destroiyng the stack HOT 2
- Cognito TAGS HOT 1
- How Do I add User Pool attributes to Cookies? HOT 1
- A potential risk in cloudfront-authorization-at-edge which can be used to upload malicious code. HOT 4
- Having the ability to tune logs HOT 1
- Deployment to eu-west-2 fails with error: Encountered a permissions error performing a tagging operation HOT 4
- Missing User-Agent header in Post request to cognito HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cloudfront-authorization-at-edge.