search

aws-samples / aws-lex-web-ui

Sample Amazon Lex chat bot web interface
Other
726 stars 462 forks source link

How to remove console.log's when integrated as Iframe? #576

Closed leonardoas10 closed 10 months ago

leonardoas10 commented 10 months ago

Hello,

I nicely integrate the iframe in a fresh react app, the bot works as spected but...

Exist too much sensitive information in the google chrome dev console.

image

I looking in docs and not exist a feature or flag to remove it.

I git clone the project to try removing this console.log's but i can't.

I wondering if you could you give me a way of removing it?

israelias commented 10 months ago

@leonardoas10 That's coming from /lex-web-ui/.eslintrc.js. Try to see if your dotenvs require a REACT_APP prefix. Otherwise just set these to 2 and cd lex-web-ui && npm run build-dist && cd .. && npm run build again

    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
israelias commented 10 months ago

@leonardoas10 Sorry I take it back. I meant to say that the webpack configs for production mode removes those automatically for us. You can also set drop_console: true, in the optimization object of webpack (depending on which version you're running). But seems there may be additionals for React https://webpack.js.org/guides/production/

leonardoas10 commented 10 months ago

@israelias Sorry i don't really catch what you're meaning, i look in the Vue component where exist this console.log's and there ins't a flag for enable or not this logs.

I.E: Lex Web Component

about drop_console could be a solution, i need to tested, as far i can see, if we use the options of cloudformation we have to

  1. fork/clone the repo
  2. make this changes of webpack or delete logs
  3. compile
  4. upload js and .min.js files to S3.
israelias commented 10 months ago

@leonardoas10 From your screenshots it seems it's printing from .min.js which should be productionized with dropped console logs already, so this might be a recent release thing .

in any case, the quickest fix would be to go to each of those files in your clone/fork ie L255 and L-234 in Lex Web Component, and comment out the console.log lines

and then yes ->

  1. compile (at vue package and then at root package, assuming each are npm installed)
  2. upload the dist directory (which should contain js/css min.js/css) to s3
    • make sure lex-web-ui-loader-config.jsonis in that dist as well
leonardoas10 commented 10 months ago

@israelias Yes, as i said before. It's a few other steps that aren't mention in the AWS Lex Workshop.

So, any person that use this solution with cloudformation Bot in his projects, gonna be facing this security problem in the console.

bobpskier commented 10 months ago

@leonardoas10, @israelias One could change the console.log to console.debug and I believe these would be removed as a default by webpack when it builds the final distribution in the minified js.

However, much of the content in the console message shown above is available in the network tab via a response for the lex-web-ui-loader-config.json request.

The IdentityId in the console message shown above is the result of authenticating against cognito using the unauthenticated role available. This id is also available in the network tab of the post response from cognito (https://cognito-identity.us-east-1.amazonaws.com/ as an example).

If you want to secure authentication and require authenticated users, use the CloudFormation template setting ForceCognitoLogin to true. This will require authentication to use the UI. You need to add users to the cognito userpool created for you or wire up a cognito identity pool to use your required authentication mechanism.

By default the LexWebUi runs unauthenticated and allows use of the bot specified when running the template.

israelias commented 10 months ago

@bobpskier We're running a clone of 0.19.9 and these logs from the child Vue app are dropped at root even on dev and non minified.

But you're right, there's nothing there that isn't exposed (albeit less explicitly) on the network tab. And (mode/build permitting) by calling the global LexWebUiLoader object or global Vue (dev tools) via window.* on the chrome console equally have paths to CONFIG.

cc @leonardoas10

leonardoas10 commented 10 months ago

Yes but for a professional delivery software, in this case, creating such bot and the implemeting it seams to be not nicely that have this logs @bobpskier & @israelias

PS: maybe is a simple OCD (anxiety) haha

bobpskier commented 10 months ago

@leonardoas10 There are times to use console.error, console.info, console.debug. A general console.log should probably not be used. Use of info messages should be minimal. However, sometimes its good to emit an info message with version of the ui and other general information such startup complete, bot running, etc. Use of console.log can and should be changed going forward. When building the minified js its best to strip out the debug messages but leave in info and error messages. This behavior use to be configurable in the webpack config and it did a good job enforcing desired use of console.*. I'll have to go look but I would suspect one can clone and build relatively easily a UI to fit the specific needs in this area.