[Tileserver] Pass tileserver token to tileserver request

[tallowen]

This change fetches a token from the nwi-tileserver-token-generator api and returns it back to the tileserver api as both a server cookie and as a header. I expect we will make 3 changes to the laravel api receiving this:

1. Verify that the token sent in the header and the token in the cookie are the same (https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#double-submit-cookie)
2. Decrypt it - this should maybe be done using HMAC since it would be significantly faster but I'm not sure what the best way to share the secret would be
3. Set a Access-Control-Allow-Origin for these endpoints so that it's harder for others to fetch from there.
   • beta.rivers.americanwhitewater.org
   • rivers.americanwhitewater.org

I'm not super vue experienced and so I'm not sure if there are better ways to do this. Perhaps a wrapper component? Ideally, I would just block the requests to the tileserver until the token is there instead of blocking the rendering of the entire map. Is there a way to do this?

[aws-amplify-us-east-2[bot]]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-572.d2e35jwpsu5vn3.amplifyapp.com

[tallowen]

This is currently viewable at https://beta.rivers.americanwhitewater.org/river-index

[ngottlieb]

You could put it in created() and then it should persist across mountings. But I don’t hve a complete grasp on the nuances of vue component reuse. Another option would be to put it in state, then we’d be sure to only request it once per time the user opens the site

On Thu, Oct 5, 2023 at 10:45 AM Owen Coutts @.***> wrote:

@.**** commented on this pull request.

In src/app/views/river-index/components/nwi-map.vue https://github.com/AmericanWhitewater/wh2o-vue/pull/572#discussion_r1347779417 :

} from '@/app/environment'

+let tileserverToken = null;

My goal was to have it persist as much as possible across different mounts of this component. I would prefer that if we mount the map multiple times (or if we navigate forward and backward to the map) we don't need to re-fetch the token.

That being said, I may be misunderstanding the vue lifecycle and how that works!

— Reply to this email directly, view it on GitHub https://github.com/AmericanWhitewater/wh2o-vue/pull/572#discussion_r1347779417, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJKLL5K6CGYEOEPDOCQTG3X53W2TAVCNFSM6AAAAAA5AEFIAOVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTMNRQGQYDKNBVHA . You are receiving this because your review was requested.Message ID: @.***>

-- -- Nick Gottlieb Sacred Headwaters: a newsletter about the interconnectedness of social and ecological crises https://sacredheadwaters.substack.com/

[ngottlieb]

@tallowen how come you closed this? pending Ryan's work?

[tallowen]

I messed up with GitHub but landed it on the Wordpress branch. https://github.com/AmericanWhitewater/wh2o-vue/commit/4c409bb7338c963fe1aefd424326a51d9aa27a5d