Fix: Add validation for whitespaces included in a query Url

src/app/utils/sample-url-generation.ts

@@ -13,7 +13,7 @@ export function parseSampleUrl(url: string, version?: string) {
       queryVersion = (version) ? version : urlObject.pathname.substring(1, 5);
       search = generateSearchParameters(urlObject, search);
       sampleUrl = `${GRAPH_URL}/${queryVersion}/${requestUrl + search}`;
-    } catch (error) {
+    } catch (error:any) {
       if (error.message === 'Failed to construct \'URL\': Invalid URL') {
         return {
           queryVersion, requestUrl, sampleUrl, search
@@ -33,7 +33,7 @@ function generateSearchParameters(urlObject: URL, search: string) {
     try {
       search = decodeURI(searchParameters);
     }
-    catch (error) {
+    catch (error:any) {
       if (error.message === 'URI malformed') {
         search = searchParameters;
       }
@@ -42,3 +42,8 @@ function generateSearchParameters(urlObject: URL, search: string) {
   return search;
 }
 
+export function hasWhiteSpace(url: string):boolean {
+  const parts = url.split('?');
+  const whitespaceChars = [' ', '\t', '\n', '%20'];
+  return whitespaceChars.some(char => parts[0].includes(char));
+}

src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx

@@ -10,7 +10,7 @@ import { IRootState } from '../../../../../types/root';
 import * as autoCompleteActionCreators from '../../../../services/actions/autocomplete-action-creators';
 import { dynamicSort } from '../../../../utils/dynamic-sort';
 import { sanitizeQueryUrl } from '../../../../utils/query-url-sanitization';
-import { parseSampleUrl } from '../../../../utils/sample-url-generation';
+import { hasWhiteSpace, parseSampleUrl } from '../../../../utils/sample-url-generation';
 import { translateMessage } from '../../../../utils/translate-messages';
 import { queryInputStyles } from '../QueryInput.styles';
 import {
@@ -389,7 +389,7 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
             onRenderSuffix={(this.renderSuffix()) ? this.renderSuffix : undefined}
             ariaLabel={translateMessage('Query Sample Input')}
             role='textbox'
-            errorMessage={!queryUrl ? translateMessage('Missing url') : ''}
+            errorMessage={getErrorMessage()}
           />
         </div>
         {showSuggestions && userInput && filteredSuggestions.length > 0 &&
@@ -399,6 +399,16 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
             onClick={(e: any) => this.selectSuggestion(e)} />}
       </div>
     );
+
+    function getErrorMessage(): string | JSX.Element | undefined {
+      if( !queryUrl){
+        return translateMessage('Missing url');
+      }
+      if(hasWhiteSpace(queryUrl)){
+        return translateMessage('Invalid whitespace in URL');
+      }
+      return '';
+    }
   }
 }
 

src/messages/GE.json

@@ -431,5 +431,6 @@
   "Preview collection": "Preview collection",
   "Download postman collection": "Download postman collection",
   "You can export the entire list as a Postman Collection. If there are items in the list you would not want, select them to remove": "You can export the entire list as a Postman Collection. If there are items in the list you would not want, select them to remove",
-  "Copied": "Copied"
+  "Copied": "Copied",
+  "Invalid whitespace in URL": "Invalid whitespace in URL"
 }

src/tests/utils/sample-url-generation.spec.tsx

@@ -1,4 +1,4 @@
-import { parseSampleUrl } from '../../app/utils/sample-url-generation';
+import { hasWhiteSpace, parseSampleUrl } from '../../app/utils/sample-url-generation';
 
 describe('Sample Url Generation', () => {
 
@@ -76,3 +76,23 @@ describe('Sample Url Generation', () => {
   });
 
 });
+
+
+describe('hasWhiteSpaces should', () => {
+  const invalidUrls = [
+    {url: ' https://graph.microsoft.com/v1.0/me', output: true},
+    {url: 'https: //graph.microsoft.com/v1.0/me', output: true},
+    {url: 'https://%20graph.microsoft.com/v1.0/me', output: true},
+    {url: 'https://graph.microsoft.com/ v1.0/me', output: true},
+    {url: 'https://graph.microsoft.com/v1.0/ me', output: true},
+    {url:
+      'https://graph.microsoft.com/v1.0/me/contacts?$filter=emailAddresses/any(a:a/address eq \'[email protected]\')',
+    output: false}
+  ];
+  invalidUrls.forEach(invalidUrl => {
+    it(`validate whitespaces in the url: ${invalidUrl.url}`, () => {
+      expect(hasWhiteSpace(invalidUrl.url)).toBe(invalidUrl.output);
+    });
+  });
+});
+