fix(internals): add url length validation for url generation

- Introduced a maximum URL length constant and validation in the createPlaygroundURL function to ensure URLs do not exceed 32,768 characters.
- Added tests to verify that errors are thrown when the URL length limit is exceeded, ensuring robust error handling in service and utils.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

.github/workflows/ci.yml

@@ -67,6 +67,7 @@ jobs:
 uses: actions/upload-pages-artifact@v5
 with:
 path: projects/pages/dist
+include-hidden-files: true
 
 lighthouse:
 runs-on: ubuntu-latest

projects/internals/tools/src/playground/service.test.ts

@@ -7,7 +7,7 @@ import { tmpdir } from 'node:os';
 import{afterEach,beforeEach,describe,expect,it}from'vitest';
 import{loadTools,typeToolMethod,typeToolOutput}from'../internal/tools.js';
 import{PlaygroundService}from'./service.js';
-import{createPlaygroundURL}from'./utils.js';
+import{createPlaygroundURL,MAX_PLAYGROUND_URL_LENGTH}from'./utils.js';
 
 // when ELEMENTS_PLAYGROUND_BASE_URL is not configured, createPlaygroundURL returns ''
 consthasPlaygroundBaseURL=createPlaygroundURL('test',[]).length>0;
@@ -148,6 +148,30 @@ describe('PlaygroundService', () => {
 );
 });
 
+it('should handle content that would exceed the supported playground URL length',async()=>{
+process.env.ELEMENTS_ENV='browser';
+consttools=loadTools(PlaygroundService);
+constcreateTool=tools.find(tool=>tool.metadata.name==='create');
+
+constresult=(awaitcreateTool?.({
+template: '<nve-button>valid</nve-button>',
+name: 'x'.repeat(MAX_PLAYGROUND_URL_LENGTH),
+start: false
+}))asToolOutput<string>;
+
+if(!hasPlaygroundBaseURL){
+expect(result.status).toBe('complete');
+expect(result.result).toBe('');
+return;
+}
+
+expect(result.status).toBe('error');
+expect(result.message).toBe(
+`Playground content produces a URL that exceeds the ${MAX_PLAYGROUND_URL_LENGTH}-character limit.`
+);
+expect(result.result).toBeUndefined();
+});
+
 it('should skip validation and return URL when not in mcp or cli environment',async()=>{
 process.env.ELEMENTS_ENV='browser';
 constresult=awaitPlaygroundService.create({

projects/internals/tools/src/playground/utils.test.ts

@@ -3,6 +3,7 @@
 
 import{describe,it,expect}from'vitest';
 importtype{ProjectElement}from'@internals/metadata';
+import{ToolError}from'../internal/tools.js';
 import{
 createPlaygroundURL,
 createAngularFiles,
@@ -12,6 +13,7 @@ import {
 createVueFiles,
 createDefaultFiles,
 formatTemplate,
+MAX_PLAYGROUND_URL_LENGTH,
 playgroundTypes
 }from'./utils.js';
 
@@ -26,6 +28,20 @@ function expectURL(result: string, expected: string) {
 }
 }
 
+functioncreateDeterministicPseudorandomBytes(length: number){
+constbytes=newUint8Array(length);
+letstate=0x12345678;
+
+for(letindex=0;index<bytes.length;index+=1){
+state^=state<<13;
+state^=state>>>17;
+state^=state<<5;
+bytes[index]=state;
+}
+
+returnbytes;
+}
+
 describe('createPlaygroundURL',()=>{
 constelements: ProjectElement[]=[
 {
@@ -558,17 +574,39 @@ describe('createImportMap with different frameworks', () => {
 
 describe('serialize function behavior',()=>{
 it('should compress and encode data by default',()=>{
-// The serialize function is called internally, so we test its effect
 constresult=createPlaygroundURL('<nve-button></nve-button>',[],{});
 
 if(hasPlaygroundBaseURL){
-// Should contain encoded files data
 expect(result).toContain('&files=');
 expect(result.length).toBeGreaterThan(100);// Should be reasonably long due to compression
 }else{
 expect(result).toBe('');
 }
 });
+
+it('should reject playground URLs that exceed the supported V8 argument-count limit',()=>{
+constbytes=createDeterministicPseudorandomBytes(200_000);
+constattributeValue=Buffer.from(bytes).toString('base64').replace(/[+/=]/g,'A');
+consttemplate=`<div data-value="${attributeValue}">content</div>`;
+
+if(!hasPlaygroundBaseURL){
+expect(createPlaygroundURL(template,[])).toBe('');
+return;
+}
+
+letthrown: unknown;
+try{
+createPlaygroundURL(template,[]);
+}catch(error){
+thrown=error;
+}
+
+expect(thrown).toBeInstanceOf(ToolError);
+expect(thrown).toHaveProperty(
+'message',
+`Playground content produces a URL that exceeds the ${MAX_PLAYGROUND_URL_LENGTH}-character limit.`
+);
+});
 });
 
 describe('Edge cases and error handling',()=>{

projects/internals/tools/src/playground/utils.ts

@@ -4,13 +4,15 @@
 import{gzipSync}from'fflate';
 importformatfrom'html-format';
 importtype{Element}from'@internals/metadata';
+import{ToolError}from'../internal/tools.js';
 import{getElementImports}from'../internal/utils.js';
 import{validateTemplate}from'../internal/validate.js';
 
 declareconst__ELEMENTS_ESM_CDN_BASE_URL__: string;
 
 constELEMENTS_PLAYGROUND_BASE_URL=process.env.ELEMENTS_PLAYGROUND_BASE_URL??'';
 constELEMENTS_ESM_CDN_BASE_URL=__ELEMENTS_ESM_CDN_BASE_URL__;
+exportconstMAX_PLAYGROUND_URL_LENGTH=32_768;
 
 interfacePlaygroundOptions{
 type?: PlaygroundType;
@@ -147,12 +149,22 @@ export function createVueFiles(content: string, elements: Element[], options: Pl
 }
 
 functioncreateURL(files: string,options: PlaygroundOptions){
+if(ELEMENTS_PLAYGROUND_BASE_URL.length===0){
+return'';
+}
+
 constdefaultOptions={openFile: 'index.html', ...options};
-returnELEMENTS_PLAYGROUND_BASE_URL.length>0
- ? encodeURI(
-`${ELEMENTS_PLAYGROUND_BASE_URL}/?version=1&layout=vertical-split${defaultOptions.name ? `&name=${defaultOptions.name.trim()}` : ''}${defaultOptions.theme ? `&theme=${defaultOptions.theme}` : ''}&file=${defaultOptions.openFile}${defaultOptions.referer ? `&ref=${defaultOptions.referer}` : ''}&files=${files}`
-)
- : '';
+consturl=encodeURI(
+`${ELEMENTS_PLAYGROUND_BASE_URL}/?version=1&layout=vertical-split${defaultOptions.name ? `&name=${defaultOptions.name.trim()}` : ''}${defaultOptions.theme ? `&theme=${defaultOptions.theme}` : ''}&file=${defaultOptions.openFile}${defaultOptions.referer ? `&ref=${defaultOptions.referer}` : ''}&files=${files}`
+);
+
+if(url.length>MAX_PLAYGROUND_URL_LENGTH){
+thrownewToolError(
+`Playground content produces a URL that exceeds the ${MAX_PLAYGROUND_URL_LENGTH}-character limit.`
+);
+}
+
+returnurl;
 }
 
 functioncreateLayoutStyles(){
@@ -195,8 +207,15 @@ nve-logo.large {
 functionserialize(data: Record<string,{content: string}>,compress=true){
 constencoded=newTextEncoder().encode(JSON.stringify(data));
 constarray=compress ? gzipSync(encoded) : encoded;
-constbase64=globalThis.btoa(String.fromCharCode(...array));
-returnencodeURIComponent(base64);
+// Limit each function call to 32,768 arguments, safely below engine limits.
+constchunkSize=0x8000;
+letbinary='';
+
+for(letoffset=0;offset<array.length;offset+=chunkSize){
+binary+=String.fromCharCode(...array.subarray(offset,offset+chunkSize));
+}
+
+returnencodeURIComponent(globalThis.btoa(binary));
 }
 
 functioncreateIndexHTML(content: string,options: PlaygroundOptions){