Build Aldhakiroun Islamic platform with live API data#1
Conversation
|
|
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
دليل المراجع (Reviewer's Guide)تنفيذ صفحة هبوط إسلامية جديدة باللغة العربية باتجاه الكتابة من اليمين إلى اليسار (RTL)، مع تصميم متجاوب، وودجات تفاعلية للقرآن وأوقات الصلاة تعتمد على واجهات برمجية عامة (Public APIs)، وأدوات تطوير أساسية عبر Vite. مخطط تسلسلي لتحميل آية قرآن وتشغيل الصوتsequenceDiagram
actor User
participant BrowserApp
participant AlQuranCloudAPI
participant AudioCDN
participant AudioElement
BrowserApp->>AlQuranCloudAPI: loadVerse fetch(ayah 53:49 editions)
AlQuranCloudAPI-->>BrowserApp: JSON data (textEdition, audio)
BrowserApp->>BrowserApp: update verse object
BrowserApp->>BrowserApp: update quranText, quranRef DOM
User->>BrowserApp: click listenButton
BrowserApp->>BrowserApp: playAudio(edition = ar.alafasy)
BrowserApp->>AudioElement: set src = verse.audio
AudioElement->>AudioElement: play()
User->>BrowserApp: click reader .play button
BrowserApp->>BrowserApp: playAudio(edition)
BrowserApp->>AudioCDN: construct audio URL with edition, verse.number
BrowserApp->>AudioElement: set src = CDN URL
AudioElement->>AudioElement: play()
AudioElement-->>BrowserApp: [play rejected]
BrowserApp->>BrowserApp: showModal(التلاوة, requires interaction)
التغييرات على مستوى الملفات
Tips and commandsالتفاعل مع Sourcery
تخصيص تجربتكادخل إلى لوحة التحكم الخاصة بك من أجل:
الحصول على المساعدة
Original review guide in EnglishReviewer's GuideImplements a new Arabic RTL Islamic landing page with responsive styling, interactive Quran and prayer-time widgets backed by public APIs, and basic dev tooling via Vite. Sequence diagram for Quran verse loading and audio playbacksequenceDiagram
actor User
participant BrowserApp
participant AlQuranCloudAPI
participant AudioCDN
participant AudioElement
BrowserApp->>AlQuranCloudAPI: loadVerse fetch(ayah 53:49 editions)
AlQuranCloudAPI-->>BrowserApp: JSON data (textEdition, audio)
BrowserApp->>BrowserApp: update verse object
BrowserApp->>BrowserApp: update quranText, quranRef DOM
User->>BrowserApp: click listenButton
BrowserApp->>BrowserApp: playAudio(edition = ar.alafasy)
BrowserApp->>AudioElement: set src = verse.audio
AudioElement->>AudioElement: play()
User->>BrowserApp: click reader .play button
BrowserApp->>BrowserApp: playAudio(edition)
BrowserApp->>AudioCDN: construct audio URL with edition, verse.number
BrowserApp->>AudioElement: set src = CDN URL
AudioElement->>AudioElement: play()
AudioElement-->>BrowserApp: [play rejected]
BrowserApp->>BrowserApp: showModal(التلاوة, requires interaction)
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
📝 WalkthroughWalkthroughChangesQuran Platform Landing Page
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant appjs
participant QuranAPI
participant AudioElement
Browser->>appjs: Initialize data loading
appjs->>QuranAPI: Request verse and prayer timings
QuranAPI-->>appjs: Return Quran and timing data
appjs->>Browser: Render content
Browser->>appjs: Select reciter
appjs->>AudioElement: Play recitation
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - لقد وجدت 6 مشكلات أمنية ومشكلة أخرى واحدة، وتركت بعض الملاحظات العامة:
المشكلات الأمنية:
- استخدام بيانات يتحكم بها المستخدم في أساليب مثل
innerHTMLأوouterHTMLأوdocument.writeيُعد نمطًا سيئًا (anti-pattern) يمكن أن يؤدي إلى ثغرات XSS (link) - استخدام بيانات يتحكم بها المستخدم في
$('#modalContent').innerHTMLيُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS (link) - استخدام بيانات يتحكم بها المستخدم في أساليب مثل
innerHTMLأوouterHTMLأوdocument.writeيُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS (link) - استخدام بيانات يتحكم بها المستخدم في
$('#readersList').innerHTMLيُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS (link) - استخدام بيانات يتحكم بها المستخدم في أساليب مثل
innerHTMLأوouterHTMLأوdocument.writeيُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS (link) - استخدام بيانات يتحكم بها المستخدم في
list.innerHTMLيُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS (link)
تعليقات عامة:
- معظم عمليات الاستعلام عن عناصر DOM تفترض أن العناصر موجودة دائمًا (مثل
$('#readersList')و$('#subscribeForm')و$('.close'))؛ إضافة دالة مساعدة صغيرة تتحقق من وجود العنصر/تؤكد عليه وتتعامل مع الفشل بسلاسة سيجعل الصفحة أكثر متانة أمام تغييرات الهيكلة المستقبلية في الـ HTML. - قيم الإعدادات الخاصة بالواجهات (APIs) والمحتوى (مثل المدينة/الدولة في
loadPrayerTimes، وروابط الـ API، ومصفوفة القرّاء) مضمنة حاليًا داخل الشفرة؛ فكّر في استخراجها إلى ثوابت على مستوى أعلى أو كائن إعدادات (config object) لتبسيط دعم اللغات (localization) لاحقًا أو التعديلات الخاصة ببيئات مختلفة. - ملف CSS مضغوط في سطر واحد، مما يجعل صيانته المستقبلية وإجراء تعديلات جزئية أصعب؛ الاحتفاظ بملف أنماط (stylesheet) منسّق كمصدر (حتى لو كنت تُصدر نسخة مضغوطة في الإنتاج) سيحسن قابلية القراءة ويسهّل التحديثات.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Most DOM queries assume elements always exist (e.g., `$('#readersList')`, `$('#subscribeForm')`, `$('.close')`); adding a small helper that asserts/query-checks and fails gracefully would make the page more resilient to future markup changes.
- The configuration values for APIs and content (e.g., city/country in `loadPrayerTimes`, API URLs, readers array) are currently embedded inline; consider extracting them into top-level constants or a config object to simplify future localization or environment-specific overrides.
- The CSS is minified into a single line, which makes future maintenance and selective changes harder; keeping a formatted source stylesheet (even if you ship a minified build) would improve readability and ease of updates.
## Individual Comments
### Comment 1
<location path="app.js" line_range="35-36" />
<code_context>
+ $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
+ } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
+}
+function playAudio(edition = 'ar.alafasy') {
+ const audio = $('#recitation');
+ const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
+ if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
</code_context>
<issue_to_address>
**issue:** Potential mismatch or stale verse number if audio is played before `loadVerse` completes.
If the user triggers playback before `loadVerse` completes, `playAudio` will still use the default `verse.number = 53`, then switch once the API response updates it. This creates a short mismatch between the visible ayah and the audio, particularly for non‑default editions using the CDN URL. Please either prevent playback until the verse is fully loaded (e.g., with a `verseLoaded` flag) or initialize `verse.number` to the correct ayah id up front to avoid this transient inconsistency.
</issue_to_address>
### Comment 2
<location path="app.js" line_range="3" />
<code_context>
const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); };
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 3
<location path="app.js" line_range="3" />
<code_context>
const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); };
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `$('#modalContent').innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 4
<location path="app.js" line_range="10" />
<code_context>
$('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 5
<location path="app.js" line_range="10" />
<code_context>
$('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `$('#readersList').innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 6
<location path="app.js" line_range="31" />
<code_context>
list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 7
<location path="app.js" line_range="31" />
<code_context>
list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `list.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Original comment in English
Hey - I've found 6 security issues, 1 other issue, and left some high level feedback:
Security issues:
- User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
$('#modalContent').innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
$('#readersList').innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
list.innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link)
General comments:
- Most DOM queries assume elements always exist (e.g.,
$('#readersList'),$('#subscribeForm'),$('.close')); adding a small helper that asserts/query-checks and fails gracefully would make the page more resilient to future markup changes. - The configuration values for APIs and content (e.g., city/country in
loadPrayerTimes, API URLs, readers array) are currently embedded inline; consider extracting them into top-level constants or a config object to simplify future localization or environment-specific overrides. - The CSS is minified into a single line, which makes future maintenance and selective changes harder; keeping a formatted source stylesheet (even if you ship a minified build) would improve readability and ease of updates.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Most DOM queries assume elements always exist (e.g., `$('#readersList')`, `$('#subscribeForm')`, `$('.close')`); adding a small helper that asserts/query-checks and fails gracefully would make the page more resilient to future markup changes.
- The configuration values for APIs and content (e.g., city/country in `loadPrayerTimes`, API URLs, readers array) are currently embedded inline; consider extracting them into top-level constants or a config object to simplify future localization or environment-specific overrides.
- The CSS is minified into a single line, which makes future maintenance and selective changes harder; keeping a formatted source stylesheet (even if you ship a minified build) would improve readability and ease of updates.
## Individual Comments
### Comment 1
<location path="app.js" line_range="35-36" />
<code_context>
+ $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
+ } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
+}
+function playAudio(edition = 'ar.alafasy') {
+ const audio = $('#recitation');
+ const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
+ if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
</code_context>
<issue_to_address>
**issue:** Potential mismatch or stale verse number if audio is played before `loadVerse` completes.
If the user triggers playback before `loadVerse` completes, `playAudio` will still use the default `verse.number = 53`, then switch once the API response updates it. This creates a short mismatch between the visible ayah and the audio, particularly for non‑default editions using the CDN URL. Please either prevent playback until the verse is fully loaded (e.g., with a `verseLoaded` flag) or initialize `verse.number` to the correct ayah id up front to avoid this transient inconsistency.
</issue_to_address>
### Comment 2
<location path="app.js" line_range="3" />
<code_context>
const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); };
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 3
<location path="app.js" line_range="3" />
<code_context>
const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); };
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `$('#modalContent').innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 4
<location path="app.js" line_range="10" />
<code_context>
$('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 5
<location path="app.js" line_range="10" />
<code_context>
$('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `$('#readersList').innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 6
<location path="app.js" line_range="31" />
<code_context>
list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 7
<location path="app.js" line_range="31" />
<code_context>
list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `list.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| function playAudio(edition = 'ar.alafasy') { | ||
| const audio = $('#recitation'); |
There was a problem hiding this comment.
issue: احتمال عدم التطابق أو استخدام رقم آية قديم إذا تم تشغيل الصوت قبل اكتمال تنفيذ loadVerse.
إذا قام المستخدم بتشغيل الصوت قبل أن تنتهي loadVerse، فستستمر playAudio في استخدام القيمة الافتراضية verse.number = 53 ثم تقوم بتغييرها بعد أن تحدّث استجابة الـ API هذه القيمة. يؤدي هذا إلى فترة قصيرة يكون فيها هناك عدم تطابق بين الآية المعروضة والصوت، خصوصًا في الإصدارات غير الافتراضية التي تستخدم رابط CDN. يُرجى إما منع التشغيل حتى يتم تحميل الآية بالكامل (مثلًا باستخدام علم verseLoaded) أو تهيئة verse.number برقم الآية الصحيح مسبقًا لتجنب هذا التعارض المؤقت.
Original comment in English
issue: Potential mismatch or stale verse number if audio is played before loadVerse completes.
If the user triggers playback before loadVerse completes, playAudio will still use the default verse.number = 53, then switch once the API response updates it. This creates a short mismatch between the visible ayah and the audio, particularly for non‑default editions using the CDN URL. Please either prevent playback until the verse is fully loaded (e.g., with a verseLoaded flag) or initialize verse.number to the correct ayah id up front to avoid this transient inconsistency.
| @@ -0,0 +1,48 @@ | |||
| const $ = (selector) => document.querySelector(selector); | |||
| const modal = $('#modal'); | |||
| const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); }; | |||
There was a problem hiding this comment.
security (javascript.browser.security.insecure-document-method): استخدام بيانات يتحكم بها المستخدم في أساليب مثل innerHTML أو outerHTML أو document.write يُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS
Source: opengrep
Original comment in English
security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| @@ -0,0 +1,48 @@ | |||
| const $ = (selector) => document.querySelector(selector); | |||
| const modal = $('#modal'); | |||
| const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); }; | |||
There was a problem hiding this comment.
security (javascript.browser.security.insecure-innerhtml): استخدام بيانات يتحكم بها المستخدم في $('#modalContent').innerHTML يُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS
Source: opengrep
Original comment in English
security (javascript.browser.security.insecure-innerhtml): User controlled data in a $('#modalContent').innerHTML is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], | ||
| ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi'] | ||
| ]; | ||
| $('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join(''); |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-document-method): استخدام بيانات يتحكم بها المستخدم في أساليب مثل innerHTML أو outerHTML أو document.write يُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS
Source: opengrep
Original comment in English
security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], | ||
| ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi'] | ||
| ]; | ||
| $('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join(''); |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-innerhtml): استخدام بيانات يتحكم بها المستخدم في $('#readersList').innerHTML يُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS
Source: opengrep
Original comment in English
security (javascript.browser.security.insecure-innerhtml): User controlled data in a $('#readersList').innerHTML is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| if (!response.ok) throw new Error('Prayer API unavailable'); | ||
| const { data } = await response.json(); | ||
| const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' }; | ||
| list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join(''); |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-document-method): استخدام بيانات يتحكم بها المستخدم في أساليب مثل innerHTML أو outerHTML أو document.write يُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS
Source: opengrep
Original comment in English
security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| if (!response.ok) throw new Error('Prayer API unavailable'); | ||
| const { data } = await response.json(); | ||
| const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' }; | ||
| list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join(''); |
There was a problem hiding this comment.
security (javascript.browser.security.insecure-innerhtml): استخدام بيانات يتحكم بها المستخدم في list.innerHTML يُعد نمطًا سيئًا يمكن أن يؤدي إلى ثغرات XSS
Source: opengrep
Original comment in English
security (javascript.browser.security.insecure-innerhtml): User controlled data in a list.innerHTML is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 314f87e6d5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| $('.close').onclick = () => modal.close(); | ||
|
|
||
| const readers = [ | ||
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], |
There was a problem hiding this comment.
Clicking the play controls for ياسر الدوسري، سعد الغامدي، or عبدالرحمن السديس currently streams Abdul Basit, Al-Husary, or Al-Minshawi respectively, because those are the editions assigned here. This makes the advertised reader list inaccurate for every entry except Alafasy; use the matching edition IDs or relabel the entries.
Useful? React with 👍 / 👎.
| $('#dhikrButton').onclick = () => showModal('أذكار اليوم', 'سبحان الله، والحمد لله، ولا إله إلا الله، والله أكبر. اجعل لسانك رطباً بذكر الله.'); | ||
| $('#zakatButton').onclick = () => showModal('حاسبة الزكاة', 'تجب الزكاة عند بلوغ النصاب وحولان الحول، ومقدارها ٢.٥٪ من المال الزكوي. استشر جهة إفتاء موثوقة للحالات الخاصة.'); | ||
| $('#qiblaButton').onclick = () => { window.open('https://qiblafinder.withgoogle.com/intl/ar/desktop', '_blank', 'noopener'); }; | ||
| $('#subscribeForm').onsubmit = (event) => { event.preventDefault(); event.target.reset(); showModal('تم الاشتراك', 'شكراً لك، سيصلك التذكير والمحتوى المفيد إلى بريدك قريباً.'); }; |
There was a problem hiding this comment.
Submitting a valid email only resets the form and displays a success message; it never sends or stores the address anywhere. Consequently, every subscriber is told that reminders will arrive even though no subscription exists, so this handler needs a real submission endpoint (and should report failure when it cannot save the address).
Useful? React with 👍 / 👎.
| ]; | ||
| $('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join(''); | ||
|
|
||
| let verse = { number: 53, audio: '' }; |
There was a problem hiding this comment.
If a visitor clicks a non-Alafasy reader before loadVerse() resolves, or after that request fails, playAudio builds its URL with this placeholder value and plays global ayah 53 rather than the displayed Al-Najm 53:49. Disable reader playback until the verse metadata is available, or initialize this with the correct global ayah number.
Useful? React with 👍 / 👎.
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| const readers = [ | ||
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], | ||
| ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi'] | ||
| ]; |
There was a problem hiding this comment.
🟠 High app.js:6
The reciter names in the readers array are paired with other reciters' edition IDs: ياسر الدوسري maps to ar.abdulbasitmurattal (Abdul Basit), سعد الغامدي maps to ar.husary (Husary), and عبدالرحمن السديس maps to ar.minshawi (Minshawi). Clicking any of those play buttons plays audio from a different reciter than the name shown. The edition identifiers need to be corrected to match the actual reciter each name represents.
| const readers = [ | |
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], | |
| ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi'] | |
| ]; | |
| +const readers = [ | |
| + ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.yasseraldosri'], | |
| + ['سعد الغامدي', 'ar.saoodshuraym'], ['عبدالرحمن السديس', 'ar.abdurrahmaansudais'] | |
| +]; |
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @app.js around lines 6-9:
The reciter names in the `readers` array are paired with other reciters' edition IDs: `ياسر الدوسري` maps to `ar.abdulbasitmurattal` (Abdul Basit), `سعد الغامدي` maps to `ar.husary` (Husary), and `عبدالرحمن السديس` maps to `ar.minshawi` (Minshawi). Clicking any of those play buttons plays audio from a different reciter than the name shown. The edition identifiers need to be corrected to match the actual reciter each name represents.
| if (!response.ok) throw new Error('Quran API unavailable'); | ||
| const { data } = await response.json(); | ||
| const textEdition = data[0]; | ||
| verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio }; |
There was a problem hiding this comment.
🟠 High app.js:19
loadVerse stores data[1].audio (the ar.abdulbasitmurattal recording) into verse.audio, but playAudio('ar.alafasy') later uses verse.audio as the Alafasy source. As a result, both the main listen button and Mishary Alafasy's reader button play Abdul Basit's recording instead of Alafasy's. The fix is to use data[0].audio for the default Alafasy audio, since data[0] is the first (ar.alafasy) edition.
| verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio }; | |
| verse = { number: textEdition.number, audio: data[0]?.audio || textEdition.audio }; |
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @app.js around line 19:
`loadVerse` stores `data[1].audio` (the `ar.abdulbasitmurattal` recording) into `verse.audio`, but `playAudio('ar.alafasy')` later uses `verse.audio` as the Alafasy source. As a result, both the main listen button and Mishary Alafasy's reader button play Abdul Basit's recording instead of Alafasy's. The fix is to use `data[0].audio` for the default Alafasy audio, since `data[0]` is the first (`ar.alafasy`) edition.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Warning
CodeRabbit couldn't request changes on this pull request because it doesn't have sufficient GitHub permissions.
Please grant CodeRabbit Pull requests: Read and write permission and re-run the review.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app.js`:
- Around line 6-9: Update the reader entries in the readers array so each Arabic
display name matches its assigned AlQuran Cloud edition identifier, especially
ar.abdulbasitmurattal, ar.husary, and ar.minshawi. Preserve the existing
identifiers unless changing them is necessary to retain the intended displayed
reciters.
- Around line 12-40: Initialize verse.number as null instead of 53, and update
playAudio to return the existing preparation modal before constructing any
reciter URL when the verse number has not been loaded. Preserve normal playback
once loadVerse successfully assigns the API’s absolute verse number.
In `@package.json`:
- Line 5: Update the package.json scripts object so the build script invokes
Vite’s production build command, changing the value from "vite" to "vite build";
leave the start and preview scripts unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b36f6376-91f2-4b8e-a01c-e62e2a5c9284
📒 Files selected for processing (4)
app.jsindex.htmlpackage.jsonstyle.css
📜 Review details
⏰ Context from checks skipped due to timeout. (3)
- GitHub Check: Macroscope - Correctness Check
- GitHub Check: Sourcery review
- GitHub Check: Macroscope - Correctness Check
🧰 Additional context used
🪛 ast-grep (0.44.1)
app.js
[warning] 2-2: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: $('#modalContent').innerHTML = <h2>${title}</h2><p>${message}</p>
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting').
(inner-outer-html)
[warning] 9-9: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: $('#readersList').innerHTML = readers.map(([name, edition], index) => <div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>).join('')
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting').
(inner-outer-html)
[warning] 30-30: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: list.innerHTML = Object.entries(labels).map(([key, label]) => <li><span>${label}</span><time>${data.timings[key]}</time></li>).join('')
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting').
(inner-outer-html)
🪛 HTMLHint (1.9.2)
index.html
[warning] 18-18: The type attribute must be present on elements.
(button-type-require)
[warning] 18-18: The type attribute must be present on
elements.(button-type-require)
[warning] 38-38: The type attribute must be present on
elements.(button-type-require)
[warning] 39-39: The type attribute must be present on
elements.(button-type-require)
[warning] 44-44: The type attribute must be present on
elements.(button-type-require)
[warning] 45-45: The type attribute must be present on
elements.(button-type-require)
[warning] 46-46: The type attribute must be present on
elements.(button-type-require)
[warning] 49-49: The type attribute must be present on
elements.(button-type-require)
[warning] 52-52: The type attribute must be present on
elements.(button-type-require)
[warning] 49-49: No matching [ label ] tag found.
(input-requires-label)
🪛 OpenGrep (1.25.0)
app.js
[WARNING] 3-3: Setting innerHTML with dynamic content can lead to XSS. Use textContent or createElement with proper escaping instead.
(coderabbit.xss.innerhtml-assignment)
[WARNING] 10-10: Setting innerHTML with dynamic content can lead to XSS. Use textContent or createElement with proper escaping instead.
(coderabbit.xss.innerhtml-assignment)
[WARNING] 31-31: Setting innerHTML with dynamic content can lead to XSS. Use textContent or createElement with proper escaping instead.
(coderabbit.xss.innerhtml-assignment)
🔇 Additional comments (1)
style.css (1)
1-1: LGTM!
| const readers = [ | ||
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], | ||
| ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi'] | ||
| ]; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Mismatch between reciter names and API edition identifiers.
The Arabic names in the readers array do not correspond to the assigned AlQuran Cloud API edition identifiers. This will cause the audio to play a different reciter's voice than the one displayed.
ar.abdulbasitmurattalmaps to Abdul Basit Abdul Samad, not "ياسر الدوسري".ar.husarymaps to Mahmoud Khalil Al-Husary, not "سعد الغامدي".ar.minshawimaps to Muhammad Siddiq Al-Minshawi, not "عبدالرحمن السديس".
Please update either the names to match the actual edition identifiers, or the identifiers to match the displayed names.
🛠️ Proposed fix (updating names to match identifiers)
const readers = [
- ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'],
- ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi']
+ ['مشاري راشد العفاسي', 'ar.alafasy'], ['عبدالباسط عبدالصمد', 'ar.abdulbasitmurattal'],
+ ['محمود خليل الحصري', 'ar.husary'], ['محمد صديق المنشاوي', 'ar.minshawi']
];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const readers = [ | |
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'], | |
| ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi'] | |
| ]; | |
| const readers = [ | |
| ['مشاري راشد العفاسي', 'ar.alafasy'], ['عبدالباسط عبدالصمد', 'ar.abdulbasitmurattal'], | |
| ['محمود خليل الحصري', 'ar.husary'], ['محمد صديق المنشاوي', 'ar.minshawi'] | |
| ]; |
🧰 Tools
🪛 ast-grep (0.44.1)
[warning] 9-9: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: $('#readersList').innerHTML = readers.map(([name, edition], index) => <div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>).join('')
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting').
(inner-outer-html)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app.js` around lines 6 - 9, Update the reader entries in the readers array so
each Arabic display name matches its assigned AlQuran Cloud edition identifier,
especially ar.abdulbasitmurattal, ar.husary, and ar.minshawi. Preserve the
existing identifiers unless changing them is necessary to retain the intended
displayed reciters.
| let verse = { number: 53, audio: '' }; | ||
| async function loadVerse() { | ||
| try { | ||
| const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal'); | ||
| if (!response.ok) throw new Error('Quran API unavailable'); | ||
| const { data } = await response.json(); | ||
| const textEdition = data[0]; | ||
| verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio }; | ||
| $('#quranText').textContent = textEdition.text; | ||
| $('#quranRef').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`; | ||
| } catch (error) { console.warn(error); } | ||
| } | ||
| async function loadPrayerTimes() { | ||
| const list = $('#prayerList'); | ||
| try { | ||
| const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4'); | ||
| if (!response.ok) throw new Error('Prayer API unavailable'); | ||
| const { data } = await response.json(); | ||
| const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' }; | ||
| list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join(''); | ||
| $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`; | ||
| } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); } | ||
| } | ||
| function playAudio(edition = 'ar.alafasy') { | ||
| const audio = $('#recitation'); | ||
| const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`; | ||
| if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.'); | ||
| audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.')); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Prevent playing the wrong verse when API data is missing.
verse.number is incorrectly initialized to 53 (the surah number). The Quran API uses absolute verse numbers across the entire Quran (e.g., 53:49 is absolute verse 4800). If the user clicks play on an alternative reciter before loadVerse finishes or if the API call fails, playAudio will construct a URL ending in /53.mp3, which incorrectly plays absolute verse 53 (from Surah Al-Baqarah).
Initialize verse.number to null and add a guard in playAudio to ensure data has finished loading before attempting playback.
🛠️ Proposed fix
-let verse = { number: 53, audio: '' };
+let verse = { number: null, audio: '' };
async function loadVerse() {
try {
const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal');
if (!response.ok) throw new Error('Quran API unavailable');
const { data } = await response.json();
const textEdition = data[0];
verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
$('`#quranText`').textContent = textEdition.text;
$('`#quranRef`').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`;
} catch (error) { console.warn(error); }
}
async function loadPrayerTimes() {
const list = $('`#prayerList`');
try {
const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4');
if (!response.ok) throw new Error('Prayer API unavailable');
const { data } = await response.json();
const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
$('`#hijriDate`').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
} catch (error) { $('`#hijriDate`').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
}
function playAudio(edition = 'ar.alafasy') {
+ if (!verse.number) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
const audio = $('`#recitation`');
const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.'));
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let verse = { number: 53, audio: '' }; | |
| async function loadVerse() { | |
| try { | |
| const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal'); | |
| if (!response.ok) throw new Error('Quran API unavailable'); | |
| const { data } = await response.json(); | |
| const textEdition = data[0]; | |
| verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio }; | |
| $('#quranText').textContent = textEdition.text; | |
| $('#quranRef').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`; | |
| } catch (error) { console.warn(error); } | |
| } | |
| async function loadPrayerTimes() { | |
| const list = $('#prayerList'); | |
| try { | |
| const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4'); | |
| if (!response.ok) throw new Error('Prayer API unavailable'); | |
| const { data } = await response.json(); | |
| const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' }; | |
| list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join(''); | |
| $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`; | |
| } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); } | |
| } | |
| function playAudio(edition = 'ar.alafasy') { | |
| const audio = $('#recitation'); | |
| const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`; | |
| if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.'); | |
| audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.')); | |
| } | |
| let verse = { number: null, audio: '' }; | |
| async function loadVerse() { | |
| try { | |
| const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal'); | |
| if (!response.ok) throw new Error('Quran API unavailable'); | |
| const { data } = await response.json(); | |
| const textEdition = data[0]; | |
| verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio }; | |
| $('`#quranText`').textContent = textEdition.text; | |
| $('`#quranRef`').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`; | |
| } catch (error) { console.warn(error); } | |
| } | |
| async function loadPrayerTimes() { | |
| const list = $('`#prayerList`'); | |
| try { | |
| const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4'); | |
| if (!response.ok) throw new Error('Prayer API unavailable'); | |
| const { data } = await response.json(); | |
| const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' }; | |
| list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join(''); | |
| $('`#hijriDate`').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`; | |
| } catch (error) { $('`#hijriDate`').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); } | |
| } | |
| function playAudio(edition = 'ar.alafasy') { | |
| if (!verse.number) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.'); | |
| const audio = $('`#recitation`'); | |
| const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`; | |
| if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.'); | |
| audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.')); | |
| } |
🧰 Tools
🪛 ast-grep (0.44.1)
[warning] 30-30: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: list.innerHTML = Object.entries(labels).map(([key, label]) => <li><span>${label}</span><time>${data.timings[key]}</time></li>).join('')
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting').
(inner-outer-html)
🪛 OpenGrep (1.25.0)
[WARNING] 31-31: Setting innerHTML with dynamic content can lead to XSS. Use textContent or createElement with proper escaping instead.
(coderabbit.xss.innerhtml-assignment)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app.js` around lines 12 - 40, Initialize verse.number as null instead of 53,
and update playAudio to return the existing preparation modal before
constructing any reciter URL when the verse number has not been loaded. Preserve
normal playback once loadVerse successfully assigns the API’s absolute verse
number.
| "name": "aldhakiroun", | ||
| "version": "1.0.0", | ||
| "private": true, | ||
| "scripts": { "start": "vite --host 0.0.0.0", "build": "vite", "preview": "vite preview --host 0.0.0.0" }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Fix the Vite build script.
The build script is currently set to "vite", which starts the development server instead of building the project for production. It should be changed to "vite build".
🛠️ Proposed fix
- "scripts": { "start": "vite --host 0.0.0.0", "build": "vite", "preview": "vite preview --host 0.0.0.0" },
+ "scripts": { "start": "vite --host 0.0.0.0", "build": "vite build", "preview": "vite preview --host 0.0.0.0" },📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "scripts": { "start": "vite --host 0.0.0.0", "build": "vite", "preview": "vite preview --host 0.0.0.0" }, | |
| "scripts": { "start": "vite --host 0.0.0.0", "build": "vite build", "preview": "vite preview --host 0.0.0.0" }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` at line 5, Update the package.json scripts object so the build
script invokes Vite’s production build command, changing the value from "vite"
to "vite build"; leave the start and preview scripts unchanged.
1 participant
Motivation
Description
index.html(layout and content),style.css(responsive theme and styles), andapp.js(interactive behaviors).loadVerse()and AlAdhan for Riyadh prayer times vialoadPrayerTimes().playAudio()), refreshable prayer times (#refreshPrayer), modal dialogs for adhkar/zakah, Qibla link, and newsletter subscribe handling (#subscribeForm).package.jsonwith a Vite dev/build script to enable local dev server and future bundling (start,build,preview).Testing
node --check app.jsand it succeeded.python3 -m http.serverandcurl -I http://127.0.0.1:4173/returnedHTTP/1.0 200 OK.git diff --checkand file staging/status commands (no linter errors reported).npm install && npm run buildbut the environment blocked access to the npm registry (HTTP 403), so the Vite install/build could not complete.Codex Task
Summary by Sourcery
تقديم صفحة هبوط عربية متجاوبة باتجاه الكتابة من اليمين إلى اليسار (RTL) لمنصة "الذاكرون" الإسلامية مع دمج مباشر للقرآن الكريم ومواقيت الصلاة.
الميزات الجديدة:
التحسينات:
البناء:
Original summary in English
Summary by Sourcery
Introduce a responsive Arabic RTL landing page for the Aldhakiroun Islamic platform with live Quran and prayer time integrations.
New Features:
Enhancements:
Build:
Summary by CodeRabbit
Note
Build Aldhakiroun Islamic platform with live Quran and prayer time API data
📊 Macroscope summarized 314f87e. 3 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted
🗂️ Filtered Issues
No issues evaluated.