Utilizing random data provided by Math.random

Question

I was interested in developing a generative project that would consist of lines of randomly generated text. Unlike projects that have already done something similar, this project takes it a bit further and is meant to generate fully formed sentences structured on patterns of grammar and speech.

I created a front end in react with a minting page that currently takes a dictionary of all the types of words I want to use, (prepositions, adjectives, etc) and a list of words corresponding to each, uses

"Math.floor(Math.random() * preposition/noun/verb/etc.length,"

for each word of the chosen sentence structure (also utilizing the above method for random selection) for a number of lines (also, chosen in the same Math.random() way)

The question here is, is this bad to do? I am looking to not create a giant solidity contract containing all of the words, and logic of putting it together. If the Math.random function is enough true randomness to satisfy not being exploited as it's not part of the blockchain, then is it secure enough? Can people in some way put their own information in creating whatever content they wish? The entirity of my function is performed with a single click, so I don't have to sanitize input from anyone, but I am not 100% sure if it is secure.

Below is the code for the generation

import React, { useState, useEffect } from 'react'
import { Container, Card, Row, Col, Button } from 'react-bootstrap';
import { languageParts } from '../shared/languageParts';
import { sentencePatterns } from '../shared/sentencePatterns';


const PoemGenerator = () => {

    const [pattern, setPattern] = useState('');
    const [poem, setPoem] = useState([]);

    function choosePattern() {
        let choice = Math.floor(Math.random() * 3);
        console.log("Choice: ", choice)
        setPattern(sentencePatterns[choice]);
    }

    function buildPoem() {
        let lines = [];
        choosePattern();
        while (lines.length < 4) {
            let currentLine = [];
            for (let i = 0; i < pattern.length; i++) {
                console.log(`Index ${i}: ${pattern[i]}`)

                const { articles, adjectives, nouns, pronouns,
                    adverbs, prepositions, verbs } = languageParts;



                switch (pattern[i]) {
                    case 'article':
                        currentLine.push(articles.beforeConsonant[Math.floor(Math.random() * articles.beforeConsonant.length)] + " ")
                        break;
                    case 'adjective':
                        currentLine.push(adjectives[Math.floor(Math.random() * adjectives.length)] + " ");
                        break;
                    case 'noun':
                        currentLine.push(nouns[Math.floor(Math.random() * nouns.length)] + " ");
                        break;
                    case 'pronoun':
                        currentLine.push(pronouns[Math.floor(Math.random() * pronouns.length)] + " ");
                        break;
                    case 'verb':
                        currentLine.push(verbs[Math.floor(Math.random() * verbs.length)] + " ");
                        break;
                    case 'adverb':
                        currentLine.push(adverbs[Math.floor(Math.random() * adverbs.length)] + " ");
                        break;
                    case 'preposition':
                        currentLine.push(prepositions[Math.floor(Math.random() * prepositions.length)] + " ");
                        break;
                    default:
                        console.log("Lol wut");
                        break;
                }
            }
            lines.push(currentLine)
        }
        setPoem(lines);
    }

    useEffect(() => {
        if (pattern == null) {
            choosePattern()
        } else {
            buildPoem(pattern)
            console.log("Poem built")
        }
    }, [pattern])

    return (
        <Container>
            <Row className='my-5' style={{ height: "70vh" }}>
                <Col sm={12} md={6}>
                    <Button onClick={choosePattern} variant='warning' size="lg">Generate</Button>
                </Col>
                <Col sm={12} md={6}>
                    <Card>
                        <Card.Header>Pattern: {pattern}</Card.Header>
                        <Card.Body>
                            {poem
                                ?
                                <>
                                    <Card.Text>{poem[0]}</Card.Text>
                                    <Card.Text>{poem[1]}</Card.Text>
                                    <Card.Text>{poem[2]}</Card.Text>
                                    <Card.Text>{poem[3]}</Card.Text>
                                </>
                                :
                                <Card.Text>Generate a poem!</Card.Text>

                            }
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </Container>
    )
}

export default PoemGenerator;

Sample output:

Answer 1

Yes it's very bad.

Just enter this in your console / script as any user could :

Math.random = function() { return 1.0 ; }

And all randomness is gone, you could replace Math.random by anything you want.

Plus Math.random is known not to be secure, as it was never intended to be.

If as you say, the user can then mint it's generated sentence / poem, and you are planning on monetizing your NFTs then this is a critical vulnerability as rarity means close to nothing in that context.