File Structure:

my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

मुख्य फ़ाइलें:

• app/page.tsx: रूट पथ / पर अनुरोधों को संभालता है।
• app/layout.tsx: एप्लिकेशन के लिए लेआउट को परिभाषित करता है, सभी पृष्ठों के चारों ओर लपेटता है।

कार्यान्वयन:

tsxCopy code// app/page.tsx

export default function HomePage() {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the root route.</p>
</div>
);
}

व्याख्या:

• रूट परिभाषा: app निर्देशिका के ठीक नीचे page.tsx फ़ाइल / रूट के लिए है।
• रेंडरिंग: यह घटक होम पेज के लिए सामग्री को रेंडर करता है।
• लेआउट एकीकरण: HomePage घटक layout.tsx द्वारा लिपटा हुआ है, जिसमें हेडर, फुटर और अन्य सामान्य तत्व शामिल हो सकते हैं।

उदाहरण: /about रूट

फ़ाइल संरचना:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

क्रियान्वयन:

// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}

व्याख्या:

• रूट परिभाषा: about फ़ोल्डर के अंदर page.tsx फ़ाइल /about रूट के लिए है।
• रेंडरिंग: यह घटक अबाउट पृष्ठ के लिए सामग्री को रेंडर करता है।

डायनामिक रूट्स वेरिएबल सेगमेंट के साथ पथों को संभालने की अनुमति देते हैं, जिससे अनुप्रयोगों को आईडी, स्लग आदि जैसे पैरामीटर के आधार पर सामग्री प्रदर्शित करने में सक्षम बनाते हैं।

उदाहरण: /posts/[id] रूट

फ़ाइल संरचना:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

क्रियान्वयन:

tsxCopy code// app/posts/[id]/page.tsx

import { useRouter } from 'next/navigation';

interface PostProps {
params: { id: string };
}

export default function PostPage({ params }: PostProps) {
const { id } = params;
// Fetch post data based on 'id'

return (
<div>
<h1>Post #{id}</h1>
<p>This is the content of post {id}.</p>
</div>
);
}

व्याख्या:

• डायनामिक सेगमेंट: [id] एक डायनामिक सेगमेंट को दर्शाता है, जो URL से id पैरामीटर को कैप्चर करता है।
• पैरामीटर तक पहुँच: params ऑब्जेक्ट में डायनामिक पैरामीटर होते हैं, जो कंपोनेंट के भीतर पहुँच योग्य होते हैं।
• रूट मिलान: कोई भी पथ जो /posts/* से मेल खाता है, जैसे /posts/1, /posts/abc, आदि, इस कंपोनेंट द्वारा संभाला जाएगा।

Next.js नेस्टेड रूटिंग का समर्थन करता है, जो हायरार्किकल रूट संरचनाओं की अनुमति देता है जो डायरेक्टरी लेआउट को दर्शाती हैं।

उदाहरण: /dashboard/settings/profile रूट

फाइल संरचना:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

क्रियान्वयन:

tsxCopy code// app/dashboard/settings/profile/page.tsx

export default function ProfileSettingsPage() {
return (
<div>
<h1>Profile Settings</h1>
<p>Manage your profile information here.</p>
</div>
);
}

व्याख्या:

• गहरा नेस्टिंग: dashboard/settings/profile/ के अंदर page.tsx फ़ाइल /dashboard/settings/profile रूट के अनुरूप है।
• हायरार्की परावर्तन: निर्देशिका संरचना URL पथ को दर्शाती है, रखरखाव और स्पष्टता को बढ़ाती है।

कैच-ऑल रूट्स कई नेस्टेड सेगमेंट या अज्ञात पथों को संभालते हैं, रूट हैंडलिंग में लचीलापन प्रदान करते हैं।

उदाहरण: /* रूट

फ़ाइल संरचना:

my-nextjs-app/
├── app/
│   ├── [..slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

क्रियान्वयन:

// app/[...slug]/page.tsx

interface CatchAllProps {
params: { slug: string[] }
}

export default function CatchAllPage({ params }: CatchAllProps) {
const { slug } = params
const fullPath = `/${slug.join("/")}`

return (
<div>
<h1>Catch-All Route</h1>
<p>You have navigated to: {fullPath}</p>
</div>
)
}

व्याख्या:

• कैच-ऑल खंड: [...slug] सभी शेष पथ खंडों को एक ऐरे के रूप में कैप्चर करता है।
• उपयोग: उपयोगकर्ता-जनित पथ, नेस्टेड श्रेणियों आदि जैसे गतिशील रूटिंग परिदृश्यों को संभालने के लिए उपयोगी।
• रूट मिलान: /anything/here, /foo/bar/baz जैसे पथ इस घटक द्वारा संभाले जाते हैं।

XSS हमले तब होते हैं जब दुर्भावनापूर्ण स्क्रिप्ट विश्वसनीय वेबसाइटों में इंजेक्ट की जाती हैं। हमलावर उपयोगकर्ताओं के ब्राउज़रों में स्क्रिप्ट्स को निष्पादित कर सकते हैं, डेटा चुरा सकते हैं या उपयोगकर्ता की ओर से क्रियाएँ कर सकते हैं।

कमजोर कोड का उदाहरण:

// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

क्यों यह कमजोर है: dangerouslySetInnerHTML का उपयोग अविश्वसनीय इनपुट के साथ करने से हमलावरों को दुर्भावनापूर्ण स्क्रिप्ट इंजेक्ट करने की अनुमति मिलती है।

यह तब होता है जब उपयोगकर्ता इनपुट को टेम्पलेट में ठीक से संभाला नहीं जाता, जिससे हमलावरों को टेम्पलेट या अभिव्यक्तियों को इंजेक्ट और निष्पादित करने की अनुमति मिलती है।

कमजोर कोड का उदाहरण:

import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

क्यों यह कमजोर है: यदि template या data में दुर्भावनापूर्ण सामग्री शामिल है, तो यह अनपेक्षित कोड के निष्पादन का कारण बन सकता है।

यह एक कमजोरी है जो हमलावरों को क्लाइंट-साइड पथों में हेरफेर करने की अनुमति देती है ताकि अनपेक्षित क्रियाएँ की जा सकें, जैसे कि क्रॉस-साइट अनुरोध धोखाधड़ी (CSRF)। सर्वर-साइड पथ ट्रैवर्सल के विपरीत, जो सर्वर की फ़ाइल प्रणाली को लक्षित करता है, CSPT वैध API अनुरोधों को दुर्भावनापूर्ण एंडपॉइंट्स पर पुनः मार्गनिर्देशित करने के लिए क्लाइंट-साइड तंत्रों का शोषण करने पर ध्यान केंद्रित करता है।

कमजोर कोड का उदाहरण:

एक Next.js एप्लिकेशन उपयोगकर्ताओं को फ़ाइलें अपलोड और डाउनलोड करने की अनुमति देता है। डाउनलोड सुविधा क्लाइंट साइड पर लागू की गई है, जहाँ उपयोगकर्ता डाउनलोड करने के लिए फ़ाइल पथ निर्दिष्ट कर सकते हैं।

// pages/download.js
import { useState } from "react"

export default function DownloadPage() {
const [filePath, setFilePath] = useState("")

const handleDownload = () => {
fetch(`/api/files/${filePath}`)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filePath
a.click()
})
}

return (
<div>
<h1>Download File</h1>
<input
type="text"
value={filePath}
onChange={(e) => setFilePath(e.target.value)}
placeholder="Enter file path"
/>
<button onClick={handleDownload}>Download</button>
</div>
)
}

हमला परिदृश्य

1. हमलावर का उद्देश्य: filePath को हेरफेर करके एक महत्वपूर्ण फ़ाइल (जैसे, admin/config.json) को हटाने के लिए CSRF हमला करना।
2. CSPT का शोषण:

• दुष्ट इनपुट: हमलावर एक URL तैयार करता है जिसमें हेरफेर किया गया filePath होता है जैसे ../deleteFile/config.json।
• परिणामी API कॉल: क्लाइंट-साइड कोड /api/files/../deleteFile/config.json पर एक अनुरोध करता है।
• सर्वर का प्रबंधन: यदि सर्वर filePath को मान्य नहीं करता है, तो यह अनुरोध को संसाधित करता है, संभावित रूप से संवेदनशील फ़ाइलों को हटा या उजागर कर सकता है।

3. CSRF को निष्पादित करना:

• तैयार लिंक: हमलावर पीड़ित को एक लिंक भेजता है या एक दुष्ट स्क्रिप्ट एम्बेड करता है जो हेरफेर किए गए filePath के साथ डाउनलोड अनुरोध को ट्रिगर करता है।
• परिणाम: पीड़ित अनजाने में क्रिया को निष्पादित करता है, जिससे अनधिकृत फ़ाइल पहुंच या हटाने की स्थिति उत्पन्न होती है।

यह क्यों कमजोर है

• इनपुट मान्यता की कमी: क्लाइंट-साइड मनमाने filePath इनपुट की अनुमति देता है, जिससे पथ यात्रा की अनुमति मिलती है।
• क्लाइंट इनपुट पर भरोसा करना: सर्वर-साइड API filePath को बिना सफाई के भरोसा करता है और संसाधित करता है।
• संभावित API क्रियाएँ: यदि API एंडपॉइंट स्थिति-परिवर्तनकारी क्रियाएँ करता है (जैसे, फ़ाइलें हटाना, संशोधित करना), तो इसे CSPT के माध्यम से शोषित किया जा सकता है।

Next.js 13+ आपको एक ही route.js या route.ts फ़ाइल के भीतर विशिष्ट HTTP विधियों के लिए हैंडलर परिभाषित करने की अनुमति देता है, जो कोड को स्पष्ट और अधिक संगठित बनाता है।

उदाहरण:

// app/api/users/[id]/route.js

export async function GET(request, { params }) {
const { id } = params
// Fetch user data based on 'id'
return new Response(JSON.stringify({ userId: id, name: "Jane Doe" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function PUT(request, { params }) {
const { id } = params
// Update user data based on 'id'
return new Response(JSON.stringify({ message: `User ${id} updated.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function DELETE(request, { params }) {
const { id } = params
// Delete user based on 'id'
return new Response(JSON.stringify({ message: `User ${id} deleted.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

व्याख्या:

• कई निर्यात: प्रत्येक HTTP विधि (GET, PUT, DELETE) का अपना निर्यातित फ़ंक्शन है।
• पैरामीटर: दूसरा तर्क params के माध्यम से रूट पैरामीटर तक पहुँच प्रदान करता है।
• सुधारित प्रतिक्रियाएँ: प्रतिक्रिया वस्तुओं पर अधिक नियंत्रण, सटीक हेडर और स्थिति कोड प्रबंधन की अनुमति देता है।

Next.js 13+ उन्नत रूटिंग सुविधाओं का समर्थन करता है जैसे कैच-ऑल रूट्स और नेस्टेड API रूट्स, जो अधिक गतिशील और स्केलेबल API संरचनाओं की अनुमति देते हैं।

कैच-ऑल रूट उदाहरण:

// app/api/[...slug]/route.js

export async function GET(request, { params }) {
const { slug } = params
// Handle dynamic nested routes
return new Response(JSON.stringify({ slug }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

व्याख्या:

• सिंटैक्स: [...] एक कैच-ऑल खंड को दर्शाता है, जो सभी नेस्टेड पथों को कैप्चर करता है।
• उपयोग: उन APIs के लिए उपयोगी है जिन्हें विभिन्न मार्ग गहराइयों या गतिशील खंडों को संभालने की आवश्यकता होती है।

नेस्टेड रूट्स उदाहरण:

// app/api/posts/[postId]/comments/[commentId]/route.js

export async function GET(request, { params }) {
const { postId, commentId } = params
// Fetch specific comment for a post
return new Response(
JSON.stringify({ postId, commentId, comment: "Great post!" }),
{
status: 200,
headers: { "Content-Type": "application/json" },
}
)
}

व्याख्या:

• गहरा नेस्टिंग: हाइरार्किकल API संरचनाओं की अनुमति देता है, जो संसाधन संबंधों को दर्शाता है।
• पैरामीटर एक्सेस: params ऑब्जेक्ट के माध्यम से कई रूट पैरामीटर आसानी से एक्सेस करें।

pages डायरेक्टरी में API रूट्स (Next.js 12 और पहले)

Next.js 13 ने app डायरेक्टरी और रूटिंग क्षमताओं को बढ़ाने से पहले, API रूट्स मुख्य रूप से pages डायरेक्टरी के भीतर परिभाषित किए गए थे। यह दृष्टिकोण अभी भी व्यापक रूप से उपयोग किया जाता है और Next.js 12 और पहले के संस्करणों में समर्थित है।

बुनियादी API रूट

फाइल संरचना:

goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

क्रियान्वयन:

javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}

व्याख्या:

• स्थान: API रूट pages/api/ निर्देशिका के अंतर्गत होते हैं।
• निर्यात: हैंडलर फ़ंक्शन को परिभाषित करने के लिए export default का उपयोग करें।
• फ़ंक्शन सिग्नेचर: हैंडलर req (HTTP अनुरोध) और res (HTTP प्रतिक्रिया) ऑब्जेक्ट प्राप्त करता है।
• रूटिंग: फ़ाइल का नाम (hello.js) एंडपॉइंट /api/hello से मैप होता है।

गतिशील API रूट्स

फ़ाइल संरचना:

bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

क्रियान्वयन:

javascriptCopy code// pages/api/users/[id].js

export default function handler(req, res) {
const {
query: { id },
method,
} = req;

switch (method) {
case 'GET':
// Fetch user data based on 'id'
res.status(200).json({ userId: id, name: 'John Doe' });
break;
case 'PUT':
// Update user data based on 'id'
res.status(200).json({ message: `User ${id} updated.` });
break;
case 'DELETE':
// Delete user based on 'id'
res.status(200).json({ message: `User ${id} deleted.` });
break;
default:
res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

व्याख्या:

• गतिशील खंड: वर्गाकार ब्रैकेट ([id].js) गतिशील मार्ग खंड को दर्शाते हैं।
• पैरामीटर तक पहुँच: गतिशील पैरामीटर तक पहुँचने के लिए req.query.id का उपयोग करें।
• विधियों को संभालना: विभिन्न HTTP विधियों (GET, PUT, DELETE, आदि) को संभालने के लिए शर्तीय तर्क का उपयोग करें।

विभिन्न HTTP विधियों को संभालना

जबकि बुनियादी API मार्ग उदाहरण एकल फ़ंक्शन के भीतर सभी HTTP विधियों को संभालता है, आप बेहतर स्पष्टता और रखरखाव के लिए प्रत्येक विधि को स्पष्ट रूप से संभालने के लिए अपने कोड को संरचित कर सकते हैं।

उदाहरण:

javascriptCopy code// pages/api/posts.js

export default async function handler(req, res) {
const { method } = req;

switch (method) {
case 'GET':
// Handle GET request
res.status(200).json({ message: 'Fetching posts.' });
break;
case 'POST':
// Handle POST request
res.status(201).json({ message: 'Post created.' });
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

सर्वश्रेष्ठ प्रथाएँ:

• चिंताओं का पृथक्करण: विभिन्न HTTP विधियों के लिए लॉजिक को स्पष्ट रूप से अलग करें।
• प्रतिक्रिया स्थिरता: क्लाइंट-साइड हैंडलिंग की सुविधा के लिए प्रतिक्रियाओं की संरचना को स्थिर रखें।
• त्रुटि प्रबंधन: असमर्थित विधियों और अप्रत्याशित त्रुटियों को सुचारू रूप से संभालें।

सुरक्षा हेडर आपके एप्लिकेशन की सुरक्षा को बढ़ाते हैं, ब्राउज़रों को यह निर्देश देकर कि सामग्री को कैसे संभालना है। ये विभिन्न हमलों जैसे कि क्रॉस-साइट स्क्रिप्टिंग (XSS), क्लिकजैकिंग, और MIME प्रकार स्निफ़िंग को कम करने में मदद करते हैं:

• सामग्री सुरक्षा नीति (CSP)
• X-Frame-Options
• X-Content-Type-Options
• स्ट्रिक्ट-ट्रांसपोर्ट-सेक्योरिटी (HSTS)
• रेफरर नीति

उदाहरण:

// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}

Next.js प्रदर्शन के लिए छवियों का अनुकूलन करता है, लेकिन गलत कॉन्फ़िगरेशन सुरक्षा कमजोरियों का कारण बन सकता है, जैसे कि अविश्वसनीय स्रोतों को दुर्भावनापूर्ण सामग्री इंजेक्ट करने की अनुमति देना।

खराब कॉन्फ़िगरेशन उदाहरण:

// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}

समस्या:

• '*': किसी भी बाहरी स्रोत से चित्रों को लोड करने की अनुमति देता है, जिसमें अविश्वसनीय या दुर्भावनापूर्ण डोमेन शामिल हैं। हमलावर चित्रों को होस्ट कर सकते हैं जिनमें दुर्भावनापूर्ण पेलोड या सामग्री होती है जो उपयोगकर्ताओं को भ्रामित करती है।
• एक और समस्या यह हो सकती है कि एक डोमेन की अनुमति दी जाए जहां कोई भी चित्र अपलोड कर सकता है (जैसे raw.githubusercontent.com)

हमलावर इसका दुरुपयोग कैसे करते हैं:

दुर्भावनापूर्ण स्रोतों से चित्रों को इंजेक्ट करके, हमलावर फ़िशिंग हमले कर सकते हैं, भ्रामक जानकारी प्रदर्शित कर सकते हैं, या चित्र रेंडरिंग लाइब्रेरी में कमजोरियों का लाभ उठा सकते हैं।

संवेदनशील जानकारी जैसे API कुंजी और डेटाबेस क्रेडेंशियल्स को सुरक्षित रूप से प्रबंधित करें बिना उन्हें क्लाइंट के सामने उजागर किए।

क. संवेदनशील चर का प्रदर्शन

खराब कॉन्फ़िगरेशन उदाहरण:

// next.config.js

module.exports = {
env: {
SECRET_API_KEY: process.env.SECRET_API_KEY, // Exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for client
},
}

समस्या:

• SECRET_API_KEY: NEXT_PUBLIC_ उपसर्ग के बिना, Next.js क्लाइंट को वेरिएबल्स को उजागर नहीं करता है। हालाँकि, यदि गलती से उपसर्ग जोड़ा गया (जैसे, NEXT_PUBLIC_SECRET_API_KEY), तो यह क्लाइंट साइड पर उपलब्ध हो जाता है।

हमलावर इसका कैसे दुरुपयोग करते हैं:

यदि संवेदनशील वेरिएबल्स क्लाइंट को उजागर होते हैं, तो हमलावर उन्हें क्लाइंट-साइड कोड या नेटवर्क अनुरोधों की जांच करके प्राप्त कर सकते हैं, जिससे APIs, डेटाबेस, या अन्य सेवाओं तक अनधिकृत पहुंच प्राप्त होती है।

अपने एप्लिकेशन के भीतर URL रीडायरेक्शंस और री-राइट्स का प्रबंधन करें, यह सुनिश्चित करते हुए कि उपयोगकर्ताओं को उचित रूप से निर्देशित किया जाए बिना ओपन रीडायरेक्ट कमजोरियों को पेश किए।

क. ओपन रीडायरेक्ट कमजोरियाँ

खराब कॉन्फ़िगरेशन उदाहरण:

// next.config.js

module.exports = {
async redirects() {
return [
{
source: "/redirect",
destination: (req) => req.query.url, // Dynamically redirects based on query parameter
permanent: false,
},
]
},
}

समस्या:

• गतिशील गंतव्य: उपयोगकर्ताओं को कोई भी URL निर्दिष्ट करने की अनुमति देता है, जिससे ओपन रीडायरेक्ट हमले संभव होते हैं।
• उपयोगकर्ता इनपुट पर भरोसा करना: उपयोगकर्ताओं द्वारा प्रदान किए गए URLs पर बिना सत्यापन के रीडायरेक्ट करना फ़िशिंग, मैलवेयर वितरण, या क्रेडेंशियल चोरी का कारण बन सकता है।

हमलावर इसका दुरुपयोग कैसे करते हैं:

हमलावर ऐसे URLs तैयार कर सकते हैं जो आपके डोमेन से उत्पन्न होने का आभास देते हैं लेकिन उपयोगकर्ताओं को दुर्भावनापूर्ण साइटों पर रीडायरेक्ट करते हैं। उदाहरण के लिए:

https://yourdomain.com/redirect?url=https://malicious-site.com

उपयोगकर्ता मूल डोमेन पर भरोसा करते हुए अनजाने में हानिकारक वेबसाइटों पर जा सकते हैं।

अपने Next.js एप्लिकेशन के लिए Webpack कॉन्फ़िगरेशन को अनुकूलित करें, जो सावधानी से न संभाले जाने पर सुरक्षा कमजोरियों को अनजाने में पेश कर सकता है।

क. संवेदनशील मॉड्यूल को उजागर करना

खराब कॉन्फ़िगरेशन उदाहरण:

// next.config.js

module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["@sensitive"] = path.join(__dirname, "secret-folder")
}
return config
},
}

समस्या:

• संवेदनशील पथों का उजागर होना: संवेदनशील निर्देशिकाओं का उपनामकरण और क्लाइंट-साइड पहुंच की अनुमति देना गोपनीय जानकारी को लीक कर सकता है।
• गुप्त जानकारियों का बंडलिंग: यदि संवेदनशील फ़ाइलें क्लाइंट के लिए बंडल की जाती हैं, तो उनकी सामग्री स्रोत मानचित्रों के माध्यम से या क्लाइंट-साइड कोड की जांच करके सुलभ हो जाती है।

हमलावर इसका कैसे दुरुपयोग करते हैं:

हमलावर एप्लिकेशन की निर्देशिका संरचना तक पहुंच प्राप्त कर सकते हैं या उसे पुनर्निर्मित कर सकते हैं, संभावित रूप से संवेदनशील फ़ाइलों या डेटा को खोजकर और उनका दुरुपयोग करके।