Az Static Web Apps

Reading time: 9 minutes

Static Web Apps Basic Information

Azure Static Web Apps एक क्लाउड सेवा है जो GitHub जैसे रिपॉजिटरी से स्वचालित CI/CD के साथ स्थिर वेब ऐप्स को होस्ट करने के लिए है। यह वैश्विक सामग्री वितरण, सर्वर रहित बैकएंड, और अंतर्निहित HTTPS प्रदान करता है, जिससे यह सुरक्षित और स्केलेबल बनता है। हालाँकि, भले ही सेवा को "स्थिर" कहा जाता है, इसका मतलब यह नहीं है कि यह पूरी तरह से सुरक्षित है। जोखिमों में गलत कॉन्फ़िगर किया गया CORS, अपर्याप्त प्रमाणीकरण, और सामग्री में छेड़छाड़ शामिल हैं, जो यदि सही तरीके से प्रबंधित नहीं किया गया तो ऐप्स को XSS और डेटा लीक जैसे हमलों के लिए उजागर कर सकता है।

Deployment Authentication

• डिप्लॉयमेंट टोकन: एक टोकन उत्पन्न होता है और इसे डिप्लॉयमेंट प्रक्रिया को प्रमाणित करने के लिए उपयोग किया जाता है। इस टोकन के साथ कोई भी नए संस्करण को डिप्लॉय करने के लिए पर्याप्त है। हर बार जब रिपॉजिटरी अपडेट होती है, तो ऐप के नए संस्करण को डिप्लॉय करने के लिए टोकन को एक गुप्त में रखकर Github Action स्वचालित रूप से रिपॉजिटरी में डिप्लॉय किया जाता है।
• GitHub Actions वर्कफ़्लो: इस मामले में, एक बहुत समान Github Action भी रिपॉजिटरी में डिप्लॉय किया जाता है और टोकन भी एक गुप्त में संग्रहीत होता है। हालाँकि, इस Github Action में एक अंतर है, यह actions/github-script@v6 क्रिया का उपयोग करके रिपॉजिटरी का IDToken प्राप्त करता है और इसका उपयोग ऐप को डिप्लॉय करने के लिए करता है।
• भले ही दोनों मामलों में क्रिया Azure/static-web-apps-deploy@v1 का उपयोग एक टोकन के साथ azure_static_web_apps_api_token पैरामीटर में किया जाता है, इस दूसरे मामले में एक यादृच्छिक टोकन एक मान्य प्रारूप के साथ जैसे 12345cbb198a77a092ff885781a62a15d51ef5e3654ca11234509ab54547270704-4140ccee-e04f-424f-b4ca-3d4dd123459c00f0702071d12345 ऐप को डिप्लॉय करने के लिए पर्याप्त है क्योंकि प्राधिकरण github_id_token पैरामीटर में IDToken के साथ किया जाता है।

Web App Basic Authentication

वेब ऐप तक पहुँचने के लिए एक पासवर्ड कॉन्फ़िगर करना संभव है। वेब कंसोल इसे केवल स्टेजिंग वातावरण या स्टेजिंग और उत्पादन दोनों को सुरक्षित करने के लिए कॉन्फ़िगर करने की अनुमति देता है।

यह इस तरह है कि लेखन के समय एक पासवर्ड-संरक्षित वेब ऐप कैसा दिखता है:

यह देखना संभव है यदि कोई पासवर्ड उपयोग किया जा रहा है और कौन से वातावरण सुरक्षित हैं:

az rest --method GET \
--url "/subscriptions/<subscription-id>/resourceGroups/Resource_Group_1/providers/Microsoft.Web/staticSites/<app-name>/config/basicAuth?api-version=2024-04-01"

हालांकि, यह पासवर्ड को स्पष्ट पाठ में नहीं दिखाएगा, केवल कुछ इस तरह: "password": "**********************"।

Routes और Roles

Routes कैसे आने वाले HTTP अनुरोधों को संभाला जाता है एक स्थिर वेब ऐप के भीतर को परिभाषित करते हैं। staticwebapp.config.json फ़ाइल में कॉन्फ़िगर किए गए, वे URL पुनर्लेखन, पुनर्निर्देश, पहुँच प्रतिबंध, और भूमिका-आधारित प्राधिकरण को नियंत्रित करते हैं, उचित संसाधन प्रबंधन और सुरक्षा सुनिश्चित करते हैं।

कुछ उदाहरण:

{
"routes": [
{
"route": "/",
"rewrite": "/index.html"
},
{
"route": "/about",
"rewrite": "/about.html"
},
{
"route": "/api/*",
"allowedRoles": ["authenticated"]
},
{
"route": "/admin",
"redirect": "/login",
"statusCode": 302
},
{
"route": "/google",
"redirect": "https://google.com",
"statusCode": 307
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/api/*", "/assets/*"]
}
}

नोट करें कि एक भूमिका के साथ एक पथ की सुरक्षा करना संभव है, फिर, उपयोगकर्ताओं को ऐप में प्रमाणित होना होगा और उस पथ तक पहुँचने के लिए उस भूमिका को दिया जाना होगा। यह भी संभव है कि विशिष्ट उपयोगकर्ताओं को विशिष्ट भूमिकाएँ देने के लिए निमंत्रण बनाएँ जो EntraID, Facebook, GitHub, Google, Twitter के माध्यम से लॉगिन करते हैं, जो ऐप के भीतर विशेषाधिकार बढ़ाने के लिए उपयोगी हो सकता है।

स्टेजिंग URL का यह प्रारूप है: https://<app-subdomain>-<PR-num>.<region>.<res-of-app-domain> जैसे: https://ambitious-plant-0f764e00f-2.eastus2.4.azurestaticapps.net

स्निप्पेट्स

यह संभव है कि HTML स्निप्पेट्स को एक स्थिर वेब ऐप के अंदर संग्रहीत किया जाए जो ऐप के अंदर लोड होंगे। इसका उपयोग ऐप में दुष्ट कोड डालने के लिए किया जा सकता है, जैसे क्रेडेंशियल चुराने के लिए JS कोड, एक कीलॉगर... अधिक जानकारी विशेषाधिकार वृद्धि अनुभाग में है।

प्रबंधित पहचान

Azure Static Web Apps को प्रबंधित पहचान का उपयोग करने के लिए कॉन्फ़िगर किया जा सकता है, हालाँकि, इस FAQ में उल्लेखित के अनुसार, वे केवल प्रमाणीकरण उद्देश्यों के लिए Azure Key Vault से रहस्यों को निकालने के लिए समर्थित हैं, अन्य Azure संसाधनों तक पहुँचने के लिए नहीं।

अधिक जानकारी के लिए, आप एक Azure गाइड पा सकते हैं जो एक स्थिर ऐप में एक वॉल्ट सीक्रेट का उपयोग करता है https://learn.microsoft.com/en-us/azure/static-web-apps/key-vault-secrets।

गणना

# List Static Webapps
az staticwebapp list --output table

# Get Static Webapp details
az staticwebapp show --name <name> --resource-group <res-group> --output table

# Get appsettings
az staticwebapp appsettings list --name <name>

# Get env information
az staticwebapp environment list --name <name>
az staticwebapp environment functions --name <name>

# Get API key
az staticwebapp secrets list --name <name>

# Get invited users
az staticwebapp users list --name <name>

# Get current snippets
az rest --method GET \
--url "https://management.azure.com/subscriptions/<subscription-id>/resourceGroups/<res-group>/providers/Microsoft.Web/staticSites/trainingdemo/snippets?api-version=2022-03-01"

# Get database connections
az rest --method GET \
--url "https://management.azure.com/subscriptions/<subscription-id>/resourceGroups/<res-group>/providers/Microsoft.Web/staticSites/<app-name>/databaseConnections?api-version=2021-03-01"

## Once you have the database connection name ("default" by default) you can get the connection string with the credentials
az rest --method POST \
--url "https://management.azure.com/subscriptions/<subscription-id>/resourceGroups/<res-group>/providers/Microsoft.Web/staticSites/<app-name>/databaseConnections/default/show?api-version=2021-03-01"

# Check connected backends
az staticwebapp backends show --name <name> --resource-group <res-group>

Get-Command -Module Az.Websites

# Retrieves details of a specific Static Web App in the specified resource group.
Get-AzStaticWebApp -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves the build details for a specific Static Web App.
Get-AzStaticWebAppBuild -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves the application settings for a specific build environment in a Static Web App.
Get-AzStaticWebAppBuildAppSetting -ResourceGroupName <ResourceGroupName> -Name <Name> -EnvironmentName <EnvironmentName>

# Retrieves functions for a specific build environment in a Static Web App.
Get-AzStaticWebAppBuildFunction -ResourceGroupName <ResourceGroupName> -Name <Name> -EnvironmentName <EnvironmentName>

# Retrieves function app settings for a specific build environment in a Static Web App.
Get-AzStaticWebAppBuildFunctionAppSetting -ResourceGroupName <ResourceGroupName> -Name <Name> -EnvironmentName <EnvironmentName>

# Retrieves the configured roles for a Static Web App.
Get-AzStaticWebAppConfiguredRole -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves the custom domains configured for a Static Web App.
Get-AzStaticWebAppCustomDomain -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves details of the functions associated with a Static Web App.
Get-AzStaticWebAppFunction -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves the app settings for the function app associated with a Static Web App.
Get-AzStaticWebAppFunctionAppSetting -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves the secrets for a Static Web App.
Get-AzStaticWebAppSecret -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves general app settings for a Static Web App.
Get-AzStaticWebAppSetting -ResourceGroupName <ResourceGroupName> -Name <Name>

# Retrieves user details for a Static Web App with a specified authentication provider.
Get-AzStaticWebAppUser -ResourceGroupName <ResourceGroupName> -Name <Name> -AuthProvider <AuthProvider>

# Retrieves user-provided function apps associated with a Static Web App.
Get-AzStaticWebAppUserProvidedFunctionApp -ResourceGroupName <ResourceGroupName> -Name <Name>

Web Apps बनाने के उदाहरण

आप निम्नलिखित लिंक में एक वेब ऐप बनाने का अच्छा उदाहरण पा सकते हैं: https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=react&pivots=github

1. रिपॉजिटरी https://github.com/staticwebdev/react-basic/generate को अपने GitHub खाते में फोर्क करें और इसका नाम my-first-static-web-app रखें
2. Azure पोर्टल में एक Static Web App बनाएं, GitHub एक्सेस कॉन्फ़िगर करें और पहले फोर्क की गई नई रिपॉजिटरी का चयन करें
3. इसे बनाएं, और कुछ मिनट प्रतीक्षा करें, और अपने नए पृष्ठ की जांच करें!

विशेषाधिकार वृद्धि और पोस्ट एक्सप्लॉइटेशन

Azure Static Web Apps में विशेषाधिकार वृद्धि और पोस्ट एक्सप्लॉइटेशन के बारे में सभी जानकारी निम्नलिखित लिंक में पाई जा सकती है:

Az - Static Web App Privesc

संदर्भ

• https://learn.microsoft.com/en-in/azure/app-service/overview
• https://learn.microsoft.com/en-us/azure/app-service/overview-hosting-plans