Skip to main content

Notifications

Community site session details

Community site session details

Session Id : 6sZmv0jBzp7YBTUqSzg/5C
Power Pages - Customize & Extend
Unanswered

Communicating with PowerPages API from a StaticWebApp

Like (0) ShareShare
ReportReport
Posted on 18 Oct 2023 13:32:01 by 15

I'm successfully communicating with the PowerPages API from a Vue SPA hosted on a StaticWebApp (after having set the expected CORS config).

 

Now as you can guess I need to do PATCH & POST requests so I need the kind of CSRF token that is managed in the officially suggested safeAjax snippet.

 

I'm using Axios for my requests and not using jQuery (anymore for years now).

 

How can I satisfy this CSRF protection without jQuery and shell ?

 

Here is my attempt of porting safeAjax to vanilla JS, but it still requires the global shell & validateLoginSession()

 

safeAjax(config) {
 return new Promise((resolve, reject) => {
 shell.getTokenDeferred()
 .then(token => {
 if (!config.headers) config.headers = {}
 config.headers.__RequestVerificationToken = token
 fetch(config)
 .then(resolve)
 .then(response => {
 const xhr = new XMLHttpRequest();
 xhr.status = response.status;
 xhr.statusText = response.statusText;
 xhr.responseURL = response.config.url;
 xhr.response = response.data;
 xhr.readyState = 4;
 validateLoginSession(response.data, response.status, xhr, resolve)
 })
 .catch(error => {
 return reject(error)
 })
 })
 .catch(error => {
 return reject(error)
 })
 })
}

 

Categories:
  • Glide Profile Picture
    15 on 25 Oct 2023 at 09:56:11
    Re: Communicating with PowerPages API from a StaticWebApp

    First, I did need to use PowerPages API and not Dataverse directly because I need to security layer of PP.

     

    Though after a bit of reverse engineering, I've actually been able to implement both getTokenDeferred() that is simply getting the CSRF token from the publicly available /_layout/tokenhtml route and validateLoginSession() which redirects the user to the login in case of specific error returned by the API.

     

    So we can easily get this token and inject it as the expected header, but after that, all non GET requests don't pass the preflight OPTIONS saying:

     

    Access to XMLHttpRequest at '<PowerPagesAPI URI>' from origin '<StaticWebApp URL>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

     

    My current CORS settings on PowerPages are the following:

    • HTTP/Access-Control-Allow-Origin: Obviously the <StaticWebApp URL>
    • HTTP/Access-Control-Allow-Credentials: true (to send the authentication cookie alongside my requests)
    • HTTP/Access-Control-Allow-Headers: includes __RequestVerificationToken between other (we also tried *)
    • HTTP/Access-Control-Allow-Methods: GET, POST, OPTIONS, PATCH, DELETE, PUT

     

    Am I missing something ? Or can't we just do it ? Which would be odd since we can already read any data from there. And in that case I wouldn't understand the use of these CORS settings.

  • OOlashyn Profile Picture
    3,496 Most Valuable Professional on 19 Oct 2023 at 12:51:34
    Re: Communicating with PowerPages API from a StaticWebApp

    Correct. Power Pages Web API is designed to be only used inside the portal and not for integration purposes or external services. For that, you can use Dataverse API (either via Web API or SDK).

  • Glide Profile Picture
    15 on 19 Oct 2023 at 05:06:01
    Re: Communicating with PowerPages API from a StaticWebApp

    You mean I can't even use a bit of liquid injecting the token into a Power page that I would request ?

  • OOlashyn Profile Picture
    3,496 Most Valuable Professional on 18 Oct 2023 at 22:18:38
    Re: Communicating with PowerPages API from a StaticWebApp

    Hi @Glide ,

    You can fully omit jQuery and use vanilla JS inside Power Pages to communicate with Web API. However, there is no way to get a token without the shell as it is provided and managed by Power Pages.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Thomas Rice – Community Spotlight

We are honored to recognize Thomas Rice as our March 2025 Community…

Kudos to the February Top 10 Community Stars!

Thanks for all your good work in the Community

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,508 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 65,369 Most Valuable Professional

Leaderboard

Featured topics

Loading started